-1

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

Edited by zorro-az: n/a

3
Contributors
16
Replies
17
Views
7 Years
Discussion Span
Last Post by Troy III
0

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

0

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

0

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"> <!-- PARENT -->
<IMG SRC="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" /> <!-- Its Child -->
</A> <!-- Parent closure -->

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

Edited by Troy III: n/a

0

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 by almostbob: n/a

0

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

0

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

0

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!

0

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

0

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 */ }

Edited by Troy III: n/a

0

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

Edited by zorro-az: n/a

0

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.

0

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

0

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

Edited by zorro-az: n/a

0

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?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.