image rollovers

**dcr33** · 09-22-2011, 11:06 AM

Say we have an image called imagefile.jpg, which we want to display when the user mouses over an already-displayed image.Now I want to preload more than just one image; for example, in a menu bar containing multiple image rollovers,or if I try to create a smooth animation effect what should i do?
I tried the following code but it doesn't work.

Please help

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
function preloader() 
{
     // counter
     var i = 0;
     // create object
     imageObj = new Image();
     // set image list
     images = new Array();
     images[0]="1.jpg"
     images[1]="2.jpg"
     images[2]="3.jpg"
     images[3]="4.jpg"
     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
} 
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='1.jpg'">
<img name="img01" src="4.jpg"></a>
</body>
</html>

**vwphillips** · 09-22-2011, 12:52 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
function preloader(){
     // counter
     var i = 0,src;
     // set image list
     var images = [];
     images[0]="1.jpg"
     images[1]="2.jpg"
     images[2]="3.jpg"
     images[3]="4.jpg"
     // start preloading
     for(i=0; i<=3; i++){
      src=images[i];
      images[i]= new Image();
      images[i].src=src;
     }
}
</script>
</head>
<body onLoad="preloader();">
<a href="#" onMouseOver="document.getElementById('img01').src='1.jpg';">
<img id="img01" src="4.jpg"></a>
</body>
</html>

**megha** · 09-22-2011, 02:51 PM

Hello vwphillips,
But what difference does it make?

There is absolutely no difference between the output of my program and that of yours!!

And why did you declare src as a variable??

**vwphillips** · 09-22-2011, 03:59 PM

your script was applying the srcs to the same image object so noly the last is being loaded.

my script converts each field to an image object with the src of the field.

now the array is an array of image objects with different srcs and each will be loaded.

**megha** · 09-22-2011, 05:53 PM

I am sorry your program doesnot work, i.e., it doesnot serve the purpose.
I want to load all the images but here only 2 images are showing. There is no animation effect also.
Only the 2 images mentioned are being loaded.

**megha** · 09-23-2011, 06:25 AM

Hello someone please reply

**vwphillips** · 09-23-2011, 02:05 PM

what animation effect do you require?

**megha** · 09-24-2011, 02:49 AM

I want the 1st one, that is ,
<1.jpg><2.jpg><3.jpg><4.jpg> //display in the browser in a cyclical order if I mouse over 1.jpg?

**vwphillips** · 09-24-2011, 09:18 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
     // counter
     var i = 0,src;
     // set image list
     var imgary1 = [];
     imgary1[0]="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
     imgary1[1]="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"
     imgary1[2]="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"
     imgary1[3]="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg"
     // start preloading
     for(i=0; i<=3; i++){
      src=imgary1[i];
      imgary1[i]= new Image();
      imgary1[i].src=src;
     }

function Cycle(id,ary,ms){
 var obj=document.getElementById(id);
 clearTimeout(obj.to);
 if (!obj.cnt){
  obj.cnt=0;
 }
 obj.cnt=++obj.cnt%ary.length;
 obj.src=ary[obj.cnt].src;
 obj.to=setTimeout(function(){ Cycle(id,ary,ms); },ms||1000);
}

function Stop(id,img){
 var obj=document.getElementById(id);
 clearTimeout(obj.to);
 obj.src=img.src;
}

</script>
</head>
<body >

<img id="img01" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="Cycle('img01',imgary1,1000);" onmouseout="Stop('img01',imgary1[0]);">
<img id="img02" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="Cycle('img02',imgary1,1000);" onmouseout="Stop('img02',imgary1[0]);">
</body>
</html>

**megha** · 09-24-2011, 04:45 PM

Hi VwPhillips,
Thanks ur program works now :thumbsup:

I have several questions.
1)What does obj.to does?
2)What is the purpose of this code -

Code:

 for(i=0; i<=3; i++){
      src=imgary1[i];
      imgary1[i]= new Image();
      imgary1[i].src=src;
     }

If i=0,then ,imgary1[0]=imgary1[0]; It implies 1=1,2=2 etc etc. does it have any meaning? Pls help me understand

3)What is obj.cnt ?
4)What does this code lines do? -

Code:

if (!obj.cnt){
  obj.cnt=0;
 }
 obj.cnt=++obj.cnt%ary.length;
 obj.src=ary[obj.cnt].src;
 obj.to=setTimeout(function(){ Cycle(id,ary,ms); },ms||1000);
}

Will be thankful if u answer.

Thread: image rollovers

Thread Tools

Search Thread

image rollovers

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions