...

View Full Version : Image Rollovers



ippo
09-23-2011, 08:03 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


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


Mainly I want to create the animation effect with the 4 images. Is that possible?

Desmondowq
09-23-2011, 09:33 AM
I guess you are trying to say when the mouse is over the image, it become an auto slidershow???


html

<img src="Img_001.jpg" onmouseover="changeimg();" onmouseout="stop();" id="img"/>

js

var t; var i=1;
function changeimg(){
document.getElementById('img').src='Img_00'+i+'.jpg';
t=setTimeout("changeimg()",1000);
if(i==3){i=1;}
i++;
}

function stop(){
clearTimeout(t);
}

ippo
09-23-2011, 11:38 AM
Hi Desmondowq,
No your code is not working as it should.
See I have 4 images in the same folder as the program file - 1.jpg,2.jpg,3.jpg & 4.jpg.
I want that if I mouse-over each image it should change to next in a cyclical order with a smooth rollover.
But your program shows one image(1.jpg) shown at the time browser opens ,then when i mouseover there is another image(2.jpg) which instantly flashes out to show 3.jpg when i mouse-over. But after the 3.jpg the 4.jpg is not shown and then it doesn't change to 1.jpg.
So all the 4 images are not being shown like a slideshow when i mouse-over.
Hope you now get my point. :)
Anyways what i tried with your code is here for you to check-


<!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>
var t; var i=1;
function changeimg(){
document.getElementById('img').src=i + '.jpg';
t=setTimeout("changeimg()",1000);
if(i==3){i=1;}
i++;
}

function stop(){
clearTimeout(t);
}
</script>
</head>

<body>

<img src="1.jpg" onmouseover="changeimg();" onmouseout="stop();" id="img"/>
</body>
</html>

Any further suggestions? :rolleyes:

Desmondowq
09-23-2011, 12:10 PM
still kinda confuse.. are you saying when a browser is loaded. 4 four img were be display example

<1.jpg><2.jpg><3.jpg><4.jpg> //display in the browser?

in cyclical order if you mouse over 1?
<2.jpg><3.jpg><4.jpg><1.jpg> //display in the browser?
it display this?

or there is this link
link
everytime u mouseover u get a different img in cyclical order?

ippo
09-23-2011, 12:13 PM
Hi Desmondowq,
Exactly,I want the 1st one, that is ,
<1.jpg><2.jpg><3.jpg><4.jpg> //display in the browser in cyclical order if I mouse over 1?
your link is not working

ippo
09-24-2011, 05:43 PM
Hi desmond,
ur link doesn't work.
Will be thankful if u answer.

vwphillips
09-24-2011, 06:33 PM
http://www.dynamicdrive.com/forums/showthread.php?p=261767#post261767



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum