image rollover script explanation help

Question

zorro-az 0 Newbie Poster

14 Years Ago

hi, everyone
i am new beginner in JavaScript environment
i have taken from internet image rollover script
but i dont understand some tricks in JavaScript
does anyone help me?
below is my code

Help with Code Tags (Toggle Plain Text)

<html>
<head>
	<title>A More Effective Rollover</title>
	<script> 
 window.onload = rolloverInit;
 function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);
		}
	}
}
 function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;
 thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	thisImage.onmouseover = rollOver;	
}
 function rollOut() {
	this.src = this.outImage.src;
}
 function rollOver() {
	this.src = this.overImage.src;
}
 </script>
	<style > 
body {
	background-color: white;
}
img {
	border-width: 0;
}
</style>
</head>
<body>
	<a href="next1.html"><img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" /></a>&nbsp;&nbsp;
	<a href="next2.html"><img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" /></a>
</body>
</html>

here i dont understand this script and what does it means

Help with Code Tags (Toggle Plain Text)

for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);

and I also dont understand for what reason here is used parentNode.tagName == "A" and what does it mean renaming it =="A"
thank you

javascript

Edited 14 Years Ago by zorro-az because: n/a

3 Contributors
16 Replies
221 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Troy III

All 16 Replies

Troy III 272 Posting Pro

14 Years Ago

Hi, there.
This is some very old script, rigid and extremely interdependant
This script will stop functioning as soon as file naming convention is broken. Meaning that it relies in things not supposed too.

I will try to comment it line by line for you:

<html>
<head>
	<title>A More Effective Rollover</title>
<!-- there is nothing, not even vaguely effective about this script! -->
	<script> 
 window.onload = rolloverInit; //calling the rollover handler on load event
 function rolloverInit() {//writing the actual rollover function 
	for (var i=0; i<document.images.length; i++) {//walking through document image collection
		if (document.images[i].parentNode.tagName == "A") {
//checking if current image is a child of a link element A - not assigning to it!
			setupRollover(document.images[i]);// calling another function that is not written yet, and passing images as functiona arguments successively. 
		}
	}
}
 function setupRollover(thisImage) {//here "thisImage" will get the passed as argument to this function earlier.
	thisImage.outImage = new Image();//creating e new image element as attribute of current image.
	thisImage.outImage.src = thisImage.src;//seting the source of that image to its existing image source to be able to switch back to default.
	thisImage.onmouseout = rollOut;// assigning the rollOut function on current image mouseout event. 
 thisImage.overImage = new Image();// creating another image as attribute of the current as in previous turn.
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif"; //now building and setting the hover image source relative path to folder "images" taking the current image id as a part of the hover  image file name and completing it with the on.gif name part.
	thisImage.onmouseover = rollOver;//asigning the rollOver to the current image onmouseover event.	
}
 function rollOut() {// now writing the actual rollOut function
	this.src = this.outImage.src;//restoring the default image source previously saved as it attribute.
}
 function rollOver() {//now writing the actual rollOver function and
	this.src = this.overImage.src;//assigning the source defined in the master function.
}
 </script>
	<style > 
body {
	background-color: white;
}
img {
	border-width: 0;
}
</style>
</head>
<body>
	<a href="next1.html"><img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" /></a>&nbsp;&nbsp;
	<a href="next2.html"><img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" /></a>
</body>
</html>

here i dont understand this script and what does it means

for (var i=0; i<document.images.length; i++) {//iterating document images collection
		if (document.images[i].parentNode.tagName == "A") {//checking if current image is a child of a link element
			setupRollover(document.images[i]);for (var i=0; i<document.images.length; i++) {activating the setupRollover function
		if (document.images[i].parentNode.tagName == "A") {//again checking if current image is a child of A element
			setupRollover(document.images[i]);//again passing the current element as argument of a setupRollover function

and I also dont understand for what reason here is used parentNode.tagName == "A" and what does it mean renaming it =="A"
thank you

As I already commented inside the code - it isn't, it is only checking if parent element of that image is a link

Troy III 272 Posting Pro

14 Years Ago

Thank you very much
I understood everything but i still dont understand where "A" came from. Can I use it without "A".
if possible help me

The "A" is exactly one or any of these "A"s in the Document! The "A" came from here:
<A HREF="next1.html"> 
<IMG SRC="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" /> 
</A>

That check makes sure that only the images wrapped in link elements "A" should receive the rollOver functionality leaving other illustrative images alone.

Edited 14 Years Ago by Troy III because: n/a

almostbob 866 Retired: passive income ROCKS

14 Years Ago

the explanation of the desired function of the script is correct.
but
the script will not work as expected
rollover images are not preloaded
the first time any affected image is rolled over the new image will be downloaded from the server, Nothing will happen for the time that the download takes
the user gets no feedback
absolutely nothing
suggest a different script, or the part of the script that calls the loads the second images be moved out of the functions, to just before the </body> tag so that images appear to mouseover properly

<html>
<head>
<script type='text/javascript'>/* code to control mouseover effect that part of the original script is not totally useless */ </script>
</head>
</body>
Bla bla bla (body html)
<script type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "http://pics.mysite.com/thisimage.1._on.gif";
image2 = new Image();
image2.src = "http://pics.mysite.com/thisimage.2._on.gif";
image3 = new Image();
image3.src = "http://pics.mysite.com/thisimage.3._on.gif";
image4 = new Image();
image4.src = "http://pics.mysite.com/thisimage.4._on.gif";
//-->
//]]>
</script>
</body>
</html>

In the example above image loading is separated from image display
functions to control the display of mouseover images are defined in the head,
the page is fully loaded,
then last,
after the page is rendered mouseover images for image anchors in the body are loaded. the user does not see any delay in page display onload, nor does the page pause during mouseover
If your site delays in load, or pauses in execution nobody waits, they leave.
DosVdanye

Edited 14 Years Ago by almostbob because: n/a

Troy III 272 Posting Pro

14 Years Ago

the explanation of the desired function of the script is correct.
but
the script will not work as expected
rollover images are not preloaded

Sorry, but I have to disagree, since the script in discussion takes care of preloading too.
You should read the code more carefully...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

zorro-az 0 Newbie Poster · Answer 1 · 2009-10-04T18:50:19+00:00

Thank you very much
I understood everything but i still dont understand where "A" came from. Can I use it without "A".
if possible help me

zorro-az 0 Newbie Poster · Answer 2 · 2009-10-04T18:52:59+00:00

can you help me to write it more understandable format

zorro-az 0 Newbie Poster · Answer 3 · 2009-10-04T19:12:37+00:00

zorro-az 0 Newbie Poster

14 Years Ago

I understood
Thank you very much

zorro-az 0 Newbie Poster · Answer 4 · 2009-10-04T20:53:42+00:00

to say true
i didn't understand
i need to write this script in a understandable format
that script which i have posted is too long
thanks for advises

Troy III 272 Posting Pro · Answer 5 · 2009-10-05T00:50:45+00:00

to say true
i didn't understand
i need to write this script in a understandable format
that script which i have posted is too long
thanks for advises

OK, here is a shorter one:

function rollover(r){
		var ic=document.images;
  for(var i=0; i<ic.length; i++){
	if(ic[i].className==r){
		var A=B=L=ic[i].src;
			L=L.substring(L.lastIndexOf("/")+1,0 );		
			B=L+"on"+B.substring(B.lastIndexOf("/")+1);
				ic[i].over=new Image();
				ic[i].over.src=B;
		ic[i].onmouseover=function(){ this.src=B }
		ic[i].onmouseout=function(){ this.src=A } 
} }	}
onload=rollover("roller")

Instructions:
1. Hover images should be named like: "defaultImage.gif" and "ondefaultImage.gif" respectively.

2. Images to be hovered should be given the same class-name f.i.: "roller" in the html document <img class="roller" src="... >

3. If you use some other classname, don't forget to update the function call with the new classname:
rollover("myNewRollerClassName");
and don't forget the quotation marks!

zorro-az 0 Newbie Poster · Answer 6 · 2009-10-05T12:18:11+00:00

I tried but i got nothink
here is the code you posted

<html>
<head>
	<title>A More Effective Rollover</title>
	<script> 
function rollover(r){		
		var ic=document.images;
  for(var i=0; i<ic.length; i++){
	if(ic[i].className==r){
		var A=B=L=ic[i].src;
			L=L.substring(L.lastIndexOf("/")+1,0 );		
			B=L+"on"+B.substring(B.lastIndexOf("/")+1);
				ic[i].over=new Image();
				ic[i].over.src=B;
		ic[i].onmouseover=function(){ this.src=B }
		ic[i].onmouseout=function(){ this.src=A } 
} }	}
onload=rollover("roller");
function rollOut() {
	this.src = this.outImage.src;
}
 function rollOver() {
	this.src = this.overImage.src;
}

 </script>
	<style > 
body {
	background-color: white;
}
img {
	border-width: 0;
}
</style>
</head>
<body>
	<a href="next1.html"><img class="roller" src="images/defaultImage.gif" width="113" height="33" alt="button1" id="button1" /></a>&nbsp;&nbsp;
	<a href="next2.html"><img src="images/defaultImage.gif" width="113" height="33" alt="button2" id="button2" /></a>
</body>
</html>

if there is any erros pls correct it full DHTML format so I find erros
Thanks very much

Troy III 272 Posting Pro · Answer 7 · 2009-10-05T19:12:23+00:00

I tried but i got nothink
here is the code you posted
..code..
if there is any erros pls correct it full DHTML format so I find erros
Thanks very much

Yes, one is mine, others are yours. I forgot to delete the onoad event after I took effort to make the function reusable forgetting that I cant pass args to the function being assigned. Anyway, this script belongs to the document body not to the document header.

<html>
<head>

<title>A More Effective Rollover</title>

<style > 
	body {
	background-color: white;
	}
	img {
	border-width: 0;
	}
</style>
</head>

<body>
	<a href="next1.html"><img class="roller" src="image1.jpg" alt="button1"></a>&nbsp;&nbsp;
	<a href="next2.html"><img class="roller" src="image2.jpg" alt="button2"></a>

<script>
function rollover(r){
		var ic=document.images;
  for(var i=0; i<ic.length; i++){
	if(ic[i].className==r){
		var A=B=L=ic[i].src;
			L=L.substring(L.lastIndexOf("/")+1,0 );
			B=L+"on"+B.substring(B.lastIndexOf("/")+1);
				ic[i].over=new Image();
				ic[i].over.src=B;
		ic[i].onmouseover=function(){this.src=B}
		ic[i].onmouseout=function(){this.src=A }
} }	}
rollover('roller');
</script>

</body>
</html>

Don't forget to name the test images as stated in actual html code:

"image1.jpg" & "onimage1.jpg"
"image2.jpg" & "onimage2.jpg"

The script will take care of the rest.

--------------
p.s.:
If you are eager to put it on the document header - you'll need a function itermediator to hide it from executing during parse time like this

onload = function(){ rollover('roller'); /*any other functions you need to execute during onload cna be placed hereafter */ }

zorro-az 0 Newbie Poster · Answer 8 · 2009-10-06T11:04:45+00:00

Hi, Troy III
i did step by step as you posted. but it again returned nothink
i guess this function can't find images source.
here is code

<html><head> <title>A More Effective Rollover</title> 
<head>

<title>A More Effective Rollover</title>

<style > 
	body {
	background-color: white;
	}
	img {
	border-width: 0;
	}
</style>
</head>

<body>
	<a href="next1.html"><img class="roller" src="images/image1.jpg" alt="button1"></a>&nbsp;&nbsp;
	<a href="next2.html"><img class="roller" src="images/image2.jpg" alt="button2"></a>

<script>
function rollover(r){
		var ic=document.images;
  for(var i=0; i<ic.length; i++){
	if(ic[i].className==r){
		var A=B=L=ic[i].src;
			L=L.substring(L.lastIndexOf("/")+1,0 );
			B=L+"images/on"+B.substring(B.lastIndexOf("/")+1);
				ic[i].over=new Image();
				ic[i].over.src=B;
		ic[i].onmouseover=function(){this.src=B}
		ic[i].onmouseout=function(){this.src=A }
} }	}
rollover('roller');
</script>

</body>
</html>

if it is not touble for you pls help me
thank you for attention an

Troy III 272 Posting Pro · Answer 9 · 2009-10-06T14:31:59+00:00

Hi, Troy III
i did step by step as you posted. but it again returned nothink
i guess this function can't find images source.
...
if it is not touble for you pls help me
thank you for attention an

QWeel there's no need to do anything step by step, here cause a singe copy-paste step will do.

Are you sure you really have those images in your folder???
It is one thing if the image doesn't change hovering your mouse pointer over them and totally different if there are no images at all.

And obviously there are no images showing on your page at all. Meaning you don't have them!

Please create your needed two state images and put them in the folder you are pointing too in your image tags.

zorro-az 0 Newbie Poster · Answer 10 · 2009-10-06T15:14:05+00:00

thank you very much
just i tested it again
one problem is image

the code you posted was jpg but in my code is gif

( .gif )problem
thanks very much
Let Come your Dreams true

zorro-az 0 Newbie Poster · Answer 11 · 2009-10-07T18:50:05+00:00

Hi, Troy III
this my old script that before i posted
i tested both your script and this old script

<html>
<head>
	<title>A More Effective Rollover</title>
	<script> 
 window.onload = rolloverInit;
 function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);

		}
	}
}
 function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;
 thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	thisImage.onmouseover = rollOver;	
}
 function rollOut() {
	this.src = this.outImage.src;
}
 function rollOver() {
	this.src = this.overImage.src;
}
 </script>
	<style > 
body {
	background-color: white;
}
img {
	border-width: 0;
}
</style>
</head>
<body>
	<a href="next1.html"><img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1"/></a>&nbsp;&nbsp;
	<a href="next2.html"><table><tr><td><img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" /></td></tr></table></a>
	
</body>
</html>

i changed the code

if (document.images[i].parentNode.tagName == "A")

to

if (document.images[i])

after then il also works
what does it mean to write code just like so

if (document.images[i].parentNode.tagName == "A")

i know A tag is parent tag of img tag but i dont understand for what reason i must declare that this is Parent node of img tag.
does it necessary to write it
thanks for attention

Troy III 272 Posting Pro · Answer 12 · 2009-10-09T11:46:25+00:00

Hi, Troy III
this my old script that before i posted
i tested both your script and this old script

<html>
<head>
	<title>A More Effective Rollover</title>
	<script> 
 window.onload = rolloverInit;
 function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);

		}
	}
}
 function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;
 thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	thisImage.onmouseover = rollOver;	
}
 function rollOut() {
	this.src = this.outImage.src;
}
 function rollOver() {
	this.src = this.overImage.src;
}
 </script>
	<style > 
body {
	background-color: white;
}
img {
	border-width: 0;
}
</style>
</head>
<body>
	<a href="next1.html"><img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1"/></a>&nbsp;&nbsp;
	<a href="next2.html"><table><tr><td><img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" /></td></tr></table></a>
	
</body>
</html>

i changed the code

if (document.images[i].parentNode.tagName == "A")

to

if (document.images[i])

after then il also works
what does it mean to write code just like so

if (document.images[i].parentNode.tagName == "A")

i know A tag is parent tag of img tag but i dont understand for what reason i must declare that this is Parent node of img tag.
does it necessary to write it
thanks for attention

Yes!
In that classic approach to the problem - it is absolutely necessary.
Because there is no other way to know that you are changing only the images that should hover.

Because with that script if you don't test if the current image is e child of A lement the script will add the hover functionality even to images that are not supposed to. In fact to every existing images on that page. So images not supposed to receive this functionality; when accidentally hovered, the script will point them to a non existing source and they will turn blank/missing. And you don't want that to happen - do you?

image rollover script explanation help

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers