Change image multiple times

Hi,

Basically my query is i want to have multiple image rollovers working so below is the code where i have 3 images but when i click on the image on web it only shows me 2nd picture but doesnt show 3rd picture.

I want when i do a mouse over on the image it should starts to change again and again until i remove the mouse from the image.

Below is my some sample code.

I would be grateful if somebody help me out.

:confused:

Code:

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> Rollimage = new Array() Rollimage[0]= new Image(121,153) Rollimage[0].src = "car1.jpg" Rollimage[1] = new Image(121,153) Rollimage[1].src = "car2.jpg" Rollimage[2] = new Image(121,153) Rollimage[2].src = "car3.jpg" function SwapOut(){ for (i=0; i< Rollimage.length; i++) { document.Rupert.src = Rollimage[i].src; } i++; return true; } function SwapBack(){ document.Rupert.src = Rollimage[0].src; return true; } </SCRIPT> </HEAD> <BODY> <IMG SRC="car1.jpg" NAME="Rupert" WIDTH=121 HEIGHT=153 BORDER=0 onmouseover="SwapOut()" onmouseout="SwapBack()"> </A> </P> <p>test</p> </BODY> </HTML>

Thanks,
Regards,

So many questions ... so little time ...

Questions:

1. What are the parameters after the new Image() assignment for?
If they are to define the width and height, this is not the way to do it.
You syntax creates an Array with 121x151 elements, which never get assigned!

2. Why the extra i++ at the end of the 'SwapOut()' function?
As far as I can see it is not used anywhere.

Also, try putting a temporary 'alert(msg)' in the loop to make sure
that the image assignment is correct and that it is not happening
so fast that you cannot see the change occur.

3. I don't understand the reference to the 'on click' in the first sentence.
You only check for 'onMouseOver=' and 'onMouseOut=' to occur, not 'onClick='.

Quote:

Originally Posted by shsh_shah

Code:

function SwapOut(){ for (i=0; i< Rollimage.length; i++) { document.Rupert.src = Rollimage[i].src; }

You don't have any timing system, so the images are swapped at inifinite speed. MultiSwap

Simple Loop to change images

First of all many thanks but I am kind of confused here...

As i just want a simple script in which loop running to change image multiple times when mouse is hovered in...

Thanks,
Regards,

Hi there shsh_shah,

and a warm welcome to these forums. ;)

Have a look at this example, you should be able to adapt it to suit your requirements...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <base href="http://mysite.orange.co.uk/azygous/images/"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #container { text-align:center; margin-top:50px; } #myimage { width:100px; height:100px; border:3px double #000; cursor:pointer; } </style> <script type="text/javascript"> var pics=['anim.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif']; var count=0; var speed=1000; /*this is set for 1 second, edit to suit requirements*/ var timer; window.onload=function(){ document.getElementById('myimage').onmouseover=function() { rotateImage(this); } } function rotateImage(obj) { obj.onmouseout=function() { count=0; clearTimeout(timer); obj.src=pics[0]; return; } count++; if(count==pics.length) { count=0; } obj.src=pics[count]; obj1=obj; timer=setTimeout('rotateImage(obj1)',speed); } </script> </head> <body> <div id="container"> <img id="myimage" src="anim.gif" alt=""> </div> </body> </html>

coothead

Thanks a million...I have no words to describe how much it helped..

"Now One more query what if i have many small pictures on the page and when i click any of them it should start changing to multiple images"

Hi there shsh_shah,

Quote:

I have many small pictures on the page and when I click any of them it should start changing to multiple images

You will have to give some precise information on that one. ;)
Here are some basic questions...
Does each small picture have its own selection of image changes or is the selection common to all?

Do you want to stop the rotation once started? If so, by what means?

...that will need answering. ;)

coothead

Thanks for quick response Coothead

1. Each Picture will have its own selection of images
2. I want to stop the rotation once mouse is removed from any image and if i hover on any image it should be the only one start rotating

example will be lets say:
many different designs of dresses on webpage and when u click any small image it starts rotating to different images for that specific design

Again i am really thankful for your continue help...

Hi there shsh_shah,

Unfortunately, well for you anyway, I am off to play a round of golf now, so I will not be able to look at this problem until this evening.
Of course, if you are lucky, someone else may solve it for you, in the meantime. ;)

coothead

Hi there shsh_shah,

I did not go out at my expected time so I had the opportunity to amend the code while waiting. ;)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <base href="http://mysite.orange.co.uk/azygous/images/"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #container { text-align:center; margin-top:50px; } #myimage,#myimage2 { width:100px; height:100px; border:3px double #000; cursor:pointer; } #myimage1 { width:200px; height:200px; border:3px double #000; cursor:pointer; } </style> <script type="text/javascript"> var pics=['anim.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif']; var pics1=['ten_quid.jpg','girl.jpg','dog.jpg','blood.jpg','grap.jpg','ball_shad.jpg']; var pics2=['buddha.jpg','clouds.jpg','apple.jpg','banana.jpg','aaa.jpg']; var count=0; var speed=1000; /*this is set for 1 second, edit to suit requirements*/ var timer; window.onload=function(){ document.getElementById('myimage').onmouseover=function() { rotateImage(this,pics); } document.getElementById('myimage1').onmouseover=function() { rotateImage(this,pics1); } document.getElementById('myimage2').onmouseover=function() { rotateImage(this,pics2); } } function rotateImage(obj,ary) { obj.onmouseout=function() { count=0; clearTimeout(timer); obj.src=ary[0]; return; } count++; if(count==ary.length) { count=0; } obj.src=ary[count]; obj1=obj; ary1=ary timer=setTimeout('rotateImage(obj1,ary1)',speed); } </script> </head> <body> <div id="container"> <img id="myimage" src="anim.gif" alt=""> <img id="myimage1" src="ten_quid.jpg" alt=""> <img id="myimage2" src="buddha.jpg" alt=""> </div> </body> </html>

coothead

PERFECTTTTTOOOO :) Thanks a million..It worked...You are a great life saver..
I will try to understand some of the tags in java script but can u please tell me..
1. why '#' with container and myimage?
2. what does that means : onmouseover=function() ?
3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?

Thanks again

Quote:

Originally Posted by shsh_shah

First of all many thanks but I am kind of confused here...

As i just want a simple script in which loop running to change image multiple times when mouse is hovered in...

Thanks,
Regards,

Just for the record, does this make it any clearer? MultiSwapClick (Even though it's useless for your homework)

Quote:

Originally Posted by shsh_shah

can u please tell me..
1. why '#' with container and myimage?
2. what does that means : onmouseover=function() ?
3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?

[translation] I need to pass this off as my own work when my teacher asks me to explain it.

Hi there shsh_shah,

Quote:

1. why '#' with container and myimage?

http://www.tizag.com/cssT/cssid.php

http://www.htmlite.com/CSS003a.php

http://www.w3.org/TR/REC-CSS2/select...l#id-selectors

http://www.w3.org/TR/REC-CSS2/selector.html#class-html

Quote:

2. what does that mean : onmouseover=function() ?

Instead of setting the onmouseover event handler as an attribute of the img element,
it has been set in the javascript itself.
This has the advantage of leaving the markup tidier and quicker to load.

Quote:

3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?

The parameter obj refers to the element that has the mouseover.
The parameter ary refers to the array of images to be used.

coothead

Thanks again my friend