JavaScript Forum

**honorfield** · 08:11 PM

I hope i'm at the right place here. I'm new in JavaScript.
In my studies i stumbled over a code that i just can't get working.

I need to create a simple rollover effect with this JavaScript code:

JavaScript:

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 = "http://www.webmaster-talk.com/images/" + thisImage.id + "_on.gif";
thisimage.onmouseover = rollOver;
}

function rollOut() {
this.src = this.outImage.src;
}

function rollOver() {
this.src = this.overImage.src;
}

HTML:

<!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=UTF-8" />
<script type="text/javascript" src="script11.js"></script>
<link rel="stylesheet" rev="stylesheet" href="style007.css" />

</head>
<body>

<a href="css001.html"><img src="http://www.webmaster-talk.com/images/leave01_off.gif" alt="leave01" id="leave01" /></a>
<a href="css001.html"><img src="http://www.webmaster-talk.com/images/leave02_off.gif" alt="leave02" id="leave02" /></a>

</body>
</html>

The images are in the right folder. They appear as buttons, but i don't get
the rollover effect!
I was sitting on that thing all day, but i just can't figure it out.
Where is the error?

Thanks so much for you help!

honorfield

<Fake sig link removed>

**logic ali** · 07-24-2009, 09:07 PM

Does any other script use the onload event?
This would be very simple to answer with a URL...

**treyk4** · 07-26-2009, 02:08 AM

I'd reccomend installing firebug (for firefox) if you haven't already. It is THE BEST tool for debugging your scripts/webpage layout/whatever.

It will save you from so many headaches in the future.

HTH,
-Trey

**chrishirst** · 07-26-2009, 07:21 AM

Looking at the code, you are not initialising the rollover script.

assigning your initialising function to the window.onload event does not trigger the event.
You need to call the "rolloverinit" function from the body onload event OR run it at the top of the script.

**honorfield** · 08:11 PM

Thanks all!

I could solve the problem with Trey's tip. I installed firebug and found a error in my script (thisimage.onmouseover = rollOver;). I had just tested the code with Dreamweaver before and it didn't show me an error!

I uploaded the test page here and it works with firefox. But Safari just shows me a rollover effect with one of the pictures.

Is it possible that the code is not up to date with some newer browser types? I got the code from an online course on lynda.com from 2008.

Cheers honorfield

**logic ali** · 07-26-2009, 11:13 PM

Quote:

Originally Posted by honorfield

I uploaded the test page here and it works with firefox. But Safari just shows me a rollover effect with one of the pictures.

Missing new operator where shown:

Quote:

Code:

thisImage.clickImage = new Image();

**honorfield** · 07-27-2009, 09:13 PM

Cool! Thanks logic ali! That works now

**honorfield** · 07-27-2009, 09:23 PM

Hey all!
I've got another question. I'm still going through this course on lynda.com and encountered another problem that i can't solve. And it's somehow very hard to get in touch with someone there, so i hope it's alright when i post my questions here

I'm creating a form that supposed to show me my mistakes whiles filling it out, before it gets send to the server. I went through it endless times, found some errors, but it still doesn't work. Even with firebug i can't find the problem.

I uploaded the form here.

Thanks a lot for your help!!!

cheers
honorfield

**meiamsome** · 11:41 PM

you have your input inside a label:
'<label for="emailAddr2">Re-enter your email address:<input id="emailAddr2" type="text" size="30" class="reqd emailAddr"/>
</label>'

try
<label for="emailAddr2">Re-enter your email address:</label>
<input id="emailAddr2" type="text" size="30" class="reqd emailAddr"/>

and of corse all the others need fixing

EDIT:
in adition youve mis-spelt length:
lenghth

**honorfield** · 08-02-2009, 08:33 PM

Cheers meiamsome!
It is so tricky with JavaScript to find all the little mistakes. I got to get the original script and compared with mine. The input inside the label is apparently ok, but beside the mis-spelling in "length", i could find some other miss takes as well.

How did you guys learn JavaScript?
A online-course, a book or in a class room? Can you give me any tips how to learn it the best way? Maybe some references?

Thanks a lot for your help

honorfield