Change image multiple times

**shsh_shah** · 04-22-2008 11:47 AM

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.

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,

**JMRKER** · 04-22-2008 01:42 PM

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='.

**Logic Ali** · 04-22-2008 02:12 PM

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

**shsh_shah** · 04-23-2008 03:50 AM

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,

**coothead** · 04-23-2008 05:05 AM

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

**shsh_shah** · 04-23-2008 05:26 AM

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"

**coothead** · 04-23-2008 05:41 AM

Hi there shsh_shah,

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

**shsh_shah** · 04-23-2008 06:06 AM

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...

**coothead** · 04-23-2008 06:55 AM

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

**coothead** · 04-23-2008 07:31 AM

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

**shsh_shah** · 04-23-2008 07:48 AM

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

**Logic Ali** · 04-23-2008 08:33 AM

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)

**Logic Ali** · 04-23-2008 08:36 AM

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.

**coothead** · 04-23-2008 01:30 PM

Hi there shsh_shah,

1. why '#' with container and myimage?

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.

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

**shsh_shah** · 04-24-2008 03:30 AM

Thanks again my friend

Thread: Change image multiple times

Thread Tools

Display

Change image multiple times

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

Simple Loop to change images

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions