PDA

View Full Version : 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



<!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
<!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? :eek:
There is absolutely no difference between the output of my program and that of yours!! :p
And why did you declare src as a variable?? :confused:

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 :rolleyes:

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

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 :confused:
3)What is obj.cnt ?
4)What does this code lines do? -

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.

vwphillips
09-24-2011, 05:32 PM
with comments


<!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";
// preload the images to acive a smooth image swap
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); // the obj will be assigned properties to control the cycle
clearTimeout(obj.to); // cancel the timeout
if (!obj.cnt){ // if obj.cnt does not exist or obj.cnt == 0
obj.cnt=0; // the count property
}
obj.cnt=++obj.cnt%ary.length; // increment the count
obj.src=ary[obj.cnt].src;
// set timout is assigned the the obj to property
// so that it can be canceled
obj.to=setTimeout(function(){ Cycle(id,ary,ms); },ms||1000);
}

function Stop(id,img){
var obj=document.getElementById(id);
clearTimeout(obj.to); // cancel the timeout
obj.cnt=0; // reset the count property to 0
obj.src=img.src; // swap the image src the the src of imgary[0]
}

</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-26-2011, 10:58 AM
Thanks phillips.
But what does this code mean "obj.to"?

vwphillips
09-26-2011, 12:40 PM
// set timout is assigned the the obj.to property
// so that it can be canceled

megha
09-27-2011, 05:24 AM
But i don't get any reference of obj.to property or the "to" keyword in any javascript book .,neither I get in google search!! :confused:
Is this 'to' a keyword?
Also,there is another reference in your program of obj.cnt.
Is 'cnt' also a keyword??

jscheuer1
09-27-2011, 06:01 AM
They are 'keys' in the sense that a javascript object is an associative array, but not keywords. However, in javascript the correct term is the one Vic used - property. Any javascript object may be given any property. Care must be taken not to use a keyword (keyword is a loose term, but in the sense you're using it implies a reserved word, like try, for, or do) or an existing property of the object (unless you can and want to overwrite it).

In other words, Vic just made them up. But with a purpose in mind and so selected ones like to for timeOut and cnt (presumably) for count, that reflect what he uses them for in the code. Makes it easier to understand it when looking back over it later.

Like, if I make an object:


var bob = {name: 'Bob'};

I can then do:


alert(bob.name);

and I'll get: 'Bob'. I can later do:


bob.relation = 'yer Uncle';

and then:


alert(bob.name + "'s " + bob.relation);

and it will alert:


Bob's yer Uncle

The name and relation properties are made up. I chose them because they signify what I used them for. They work because that's how javascript objects work.