473,225 Members | 1,493 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

Expand image from slide show

idsanjeev
241 100+
Hi
i have some image in slide show on load events. i wants to expand image on mouseover from slide show.
thanks
May 26 '08 #1
22 3357
gits
5,390 Expert Mod 4TB
on mouseover just set the size and with of the currently hovered image ... post the code you have done so far.

kind regards
May 26 '08 #2
idsanjeev
241 100+
on mouseover just set the size and with of the currently hovered image ... post the code you have done so far.

kind regards
Hello gits
code of fade image is work but i wants to on mouse over the image is expanded

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script language="javascript" type="text/javascript">
  3. <!-- Begin
  4. // Set slideShowSpeed (milliseconds)
  5. var slideShowSpeed = 1500;
  6. // Duration of crossfade (seconds)
  7. var crossFadeDuration = 3;
  8.  
  9. var Pic = new Array();
  10. // to add more images, just continue
  11. // the pattern, adding to the array below
  12.  
  13. Pic[0] = 'images/photo1.jpg'
  14. Pic[1] = 'images/photo2.jpg'
  15. Pic[2] = 'images/photo3.jpg'
  16. Pic[3] = 'images/photo4.jpg'
  17. Pic[4] = 'images/photo5.jpg'
  18. Pic[5] = 'images/photo6.jpg'
  19. Pic[6] = 'images/photo7.jpg'
  20. Pic[7] = 'images/photo9.jpg'
  21. Pic[8] = 'images/photo10.jpg'
  22. Pic[9] = 'images/photo11.jpg'
  23.  
  24. // do not edit anything below this line
  25. var t;
  26. var j = 0;
  27. var p = Pic.length;
  28. var preLoad = new Array();
  29. for (i = 0; i < p; i++) {
  30. preLoad[i] = new Image();
  31. preLoad[i].src = Pic[i];
  32. }
  33. function runSlideShow() {
  34. if (document.all) {
  35. document.images.SlideShow.style.filter="blendTrans(duration=2)";
  36. document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
  37. document.images.SlideShow.filters.blendTrans.Apply();
  38. }
  39. document.images.SlideShow.src = preLoad[j].src;
  40. if (document.all) {
  41. document.images.SlideShow.filters.blendTrans.Play();
  42. }
  43. j = j + 1;
  44. if (j > (p - 1)) j = 0;
  45. t = setTimeout('runSlideShow()', slideShowSpeed);
  46. }
  47. window.onload=runSlideShow;
  48. //  End -->
  49.  
  50.  
  51. </script>
  52.  
Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <div style="position:absolute; top:0; left:0 ">
  4. <img src="images/photo9.jpg" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX" title="Barauni Refinry">
  5.  
  6. </div>
  7.  
thanks
May 26 '08 #3
gits
5,390 Expert Mod 4TB
let me give you an example:

[HTML]<html>
<script type="text/javascript">
function zoom_in(ele) {
ele.style.width = '400px';
ele.style.height = '400px';
}
</script>

<body>
<img src="image.gif" onmouseover="zoom_in(this);">
</body>
</html>
[/HTML]
kind regards
May 26 '08 #4
idsanjeev
241 100+
Hello gits
Thanks it works fine
i am usinng some frame so i wants to open it in popupwindow on mouseover and onmouse out close popup becouse size of frame where image fadein is very short its maximum width is 170px .

thanks
May 27 '08 #5
gits
5,390 Expert Mod 4TB
do you have a solution, or are you asking for one? in that case use window.open() in the shown function and append an image element with a src to the greater image to it ... on mouseover just use window_ref.close() ...

the better solution would be to use an inline div or google for lightbox in case you wnat to have some out of the box fancy stuff ...

kind regards
May 27 '08 #6
idsanjeev
241 100+
i have solution of window.open() on mouseover and but i cant understands how can image show thats fade in

Expand|Select|Wrap|Line Numbers
  1.  
  2. new_window.document.open();
  3.  
  4. // Text of the new document
  5. // Replace your " with ' or \" or your document.write statements will fail
  6. new_window.document.write("<html><title>JavaScript New Window</title>");
  7. new_window.document.write("<body bgcolor=\"#FFFFFF\">");
  8. new_window.document.write("This is a new html document created by JavaScript ");
  9. new_window.document.write("statements contained in the previous document.");
  10. new_window.document.write("</body></html>");
  11.  
  12. // close the document
  13. new_window.document.close(); 
  14. }
  15.  
May 27 '08 #7
idsanjeev
241 100+
hello
I think i couldn't expalin clearly whats my need.
lets try to explain
i have four frame top,left,cetner and right
some images are display at right frame in fader
my needs onmouseover open a popup window and expand the image
i have code for popupwindow but havn't idea how to display image thats in fader
thanks
May 28 '08 #8
gits
5,390 Expert Mod 4TB
i'm not really sure that i get it ... are you looking for something like this:

in your image's onmouseover use:

Expand|Select|Wrap|Line Numbers
  1. onmouseover="zoom_window(this);"
  2.  
i assume your function now uses the code you posted above and now gets the ref to the currently clicked image passed to it. so you could use something like the following now:

Expand|Select|Wrap|Line Numbers
  1. function zoom_window(ref) {
  2.     // some of your code 
  3.     new_window.document.write('<img src="' + ref.src + '"/>');
  4.     // more of your code
  5. }
kind regards
May 28 '08 #9
hsriat
1,654 Expert 1GB
If I can jump into this, may I know if the OP wants something what happens in yahoo mail (the new one) when you click on an attachment image?
May 28 '08 #10
idsanjeev
241 100+
Hi gits
here is my code which works thats i wnats to do

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2. //Function to open PopupWindow and Close PopupWindow
  3. function new_window(){
  4.     new_window = open('fader.asp','new','width=500,height=450,left=10,top=10');
  5. }
  6.  
  7. function close_window() 
  8. {
  9. new_window.close();
  10. }
  11.  
  12. </script>
  13.  
  14. <div style="position:absolute; top:0; left:0 ">
  15.  
  16. <!--
  17. Link for opne popup wondow 
  18. <a onmouseover="window.open('fader.asp','Popup_Window','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=475px,height=420px,top=30,left=20')"  >
  19. -->
  20.  
  21. <img src="images/1.jpg" id="new" onMouseOver="new_window()" onMouseOut="close_window()" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX"  title="Click to Magnifying Image">
  22. <!--</a>-->
  23. </div>
But when first time mouse over on image popup window is opend and onmouseout closed but not more without page refresh means it works only one time when mouse over on image after first time error is at line 21 where <img src.............>
line:-21
char:-1
error:-the callee[server[not server application]]is not available and disappeared; all connection are invalid. the call did not execute.

I am creating link onmouseover image window is open but it not close on mouseout
I try with these two to open new window onmouseover and close on mouseout
thanks
May 29 '08 #11
idsanjeev
241 100+
Hi this code is working for me

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript"> 
  2. //Function to open PopupWindow and Close PopupWindow 
  3.  
  4. function   new_window() { 
  5.   my_window = window.open('fader.asp','new','width=500,height=450,left=10,top=10'); 
  6.   } 
  7.  
  8. function close_window() { 
  9.   my_window.close(); 
  10.   } 
  11.  
  12. </script>
  13.  
Happy codding
Thanks
May 30 '08 #12
idsanjeev
241 100+
Hi
I wants use open image in new winow mouseover on which but can't success

Expand|Select|Wrap|Line Numbers
  1. <scripts laguage="javascrpts">
  2. function new_window(ImageURL) { 
  3. my_window = window.open(ImageURL, 'new', 'width=500,height=450,left=10,top=10'); 
  4.   } 
  5. function close_window() { 
  6.   my_window.close(); 
  7.   } 
  8. </script> 
  9. <div id="new" style="position:absolute; top:0; left:0 "> 
  10. <img src="images/1.jpg"  onMouseOver="new_window('images1/1.jpg')"  onMouseOut="close_window()" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX"  title="Magnifying Image"> 
  11.  
  12. </div>
May 30 '08 #13
gits
5,390 Expert Mod 4TB
you have some errors in your code, fix the type in javascript-tag, the script-tag itself etc. write the event-handlers all lowerCase -> for example onmouseover ...

[HTML]<script type="text/javascript">
function new_window(ImageURL) {
my_window = window.open(ImageURL, 'new', 'width=500,height=450,left=100,top=100');
}
</script>
<div id="new" style="position:absolute; top:0; left:0 "> <img src="images/1.jpg" onmouseover="new_window('images1/1.jpg')" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170px" height="170px" title="Magnifying Image">
</div>
[/HTML]
kind regards
May 30 '08 #14
hsriat
1,654 Expert 1GB
Hi
I wants use open image in new winow mouseover on which but can't success

Expand|Select|Wrap|Line Numbers
  1. &lt;scripts laguage="javascrpts"&gt;
  2. function new_window(ImageURL) { 
  3. my_window = window.open(ImageURL, 'new', 'width=500,height=450,left=10,top=10'); 
  4.   } 
  5. function close_window() { 
  6.   my_window.close(); 
  7.   } 
  8. &lt;/script&gt; 
  9. &lt;div id="new" style="position:absolute; top:0; left:0 "&gt; 
  10. &lt;img src="images/1.jpg"  onMouseOver="new_window('images1/1.jpg')"  onMouseOut="close_window()" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX"  title="Magnifying Image"&gt; 
  11.  
  12. &lt;/div&gt;
it open only one image images/1.jpg but my needs to open thats image mouse overon which from slide
thanks
Declare my_window as a global variable in the start of the JavaScript.
When your new_window function is done, the local variable my_window is getting deleted. So the closing function doesn't work.
Remove language attribute from script tag, use type attribute instead (type="text/javascript").
Use onmouseover instead of onMouseOver. Its not VB script.
And follow as gits suggested.

And I asked you here about the problem but you didn't reply, so there was no need of PM.

Regards,
Harpreet
May 30 '08 #15
gits
5,390 Expert Mod 4TB
hi idsanjeev,

don't PM experts, mods or admins regarding your problems unless your are told to do so! consider this a friendly warning by not considering this you risk a formal warning and at least this could result in a temporary ban ... read this guideline ...

kind regards
MOD
May 30 '08 #16
idsanjeev
241 100+
ok, i remember it
thanks
May 30 '08 #17
hsriat
1,654 Expert 1GB
ok, i remember it
thanks
But you didn't tell if that thing worked for you or not.
May 30 '08 #18
idsanjeev
241 100+
i cant understand thats you wnats to tell hsriat

butt sorry if any guideline had been broken by me

my internet connection is failled so after connecting i am giving
i think i am not able to clear my question
actually the working for new window

but i wants instead of fader.asp open image from slide show mean open window with image mouse over on thats

Expand|Select|Wrap|Line Numbers
  1. <img src="images/1.jpg"  onMouseOver="new_window()"  onMouseOut="close_window()" name='SlideShow' border="5px" style="border-color:#B812A7 " width="170PX"  height="140PX"  title="Magnifying Image">
thanks
May 30 '08 #19
hsriat
1,654 Expert 1GB
Ok, read the following stuff very carefully now.
  • The first argument of window.open should be the link (url) to the page which you want to open. Page, in your case is your image. So provide complete link of the image in that attribute.
  • In your function new_window(), you have an argument. According to your function, this needs to be the same argument which you have to give to the window.open function. So again, it should be the complete valid link to the image you want to open.
  • When you have a function with local variables in it, you can't access those local variables outside that function. If you need to do that, you have to declare them as global variables.

So modify these things in your page:
First:
Expand|Select|Wrap|Line Numbers
  1. onmouseover="new_window(this.src)
this.src will refer to the link of the image.
Second:
Expand|Select|Wrap|Line Numbers
  1. <scripts type="text/javascript">
  2. var my_window;
This will declare my_window as global variable.
May 30 '08 #20
hsriat
1,654 Expert 1GB
Don't tell me to explain this in Hindi now.
May 30 '08 #21
idsanjeev
241 100+
i try to do like
link
but slide show starts onload and picture expand onMouseOver
thanks
May 30 '08 #22
hsriat
1,654 Expert 1GB
You followed nothing what was said by gits and then me.
What do you want to be improved in this page?

Note: Doctype contains a sign of exclamation ( ! ) in the starting.
<!doctype ...... >
May 30 '08 #23

Sign in to post your reply or Sign up for a free account.

Similar topics

4
by: Tim | last post by:
Hope someone in the big wide world can help... What I want to do is have an image slideshow which automatically scrolls through a series of images very fast, then pauses when you move your mouse...
2
by: Mekon | last post by:
I have never written a line of script in my life but I need some help with it now. I have this auto generated code which I want to modify if possible The script generates a strip of...
7
by: peter | last post by:
I use the click-to-expand menu at http://javascript.internet.com/navigation/click-to-expand-menu.html This works fine, but is there a way to expand or collapse all the menus? An example of how...
0
by: aarondouglas28 | last post by:
Hey all, I'm hoping someone can help me with a problem I'm having. I have a page that has a javascript based slide show of images on it. The user can press a play button and the page will cycle...
0
by: | last post by:
We have developed a free image-viewer for testing .Net and GDI+ capabilityes. e-View supports a lot of raster and vectorial image formats: -Bitmap (BMP) -Graphics Interchange Format (GIF)...
1
by: www.web20developers.com | last post by:
http://www.web20developers.com http://www.web20developers.com/index.php?option=com_content&task=view... Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell AJAX -...
1
by: bn4 | last post by:
I have been trying to modify a script that i had working in the past but have lost.. ORIGINAL URL: http://www.thescripts.com/forum/thread147097.html STEPS: I want it to do the following:...
2
by: vineetbindal | last post by:
Hi all, We have a slide show in a page which shows slids rotating after every 8-10 seconds with some descriptions about them. The problem is if the connection speed is slow then the page loads...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.