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>
<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
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
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:[indent]<A HREF="next1.html">
<IMG SRC="images/button1_off.gif" width="113" height="33" alt="button1" id="button1" />
A> [/indent]
That check makes sure that only the images wrapped in link elements "A" should receive the rollOver functionality leaving other illustrative images alone.
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
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
almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
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...
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
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 ashorter 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 
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
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>
<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 */ }
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
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.
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
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>
<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?
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
