Web Hosting Talk : Web Hosting Main Forums : Programming Discussion : JavaScript Image Rollovers

[Joshua44]

ARG!! For some reason this script isn't working; if you roll the mouse over the "Tongue Twisters" image and all the images above it, it says "Object doesn't support this property or method."
Tongue Twisters is on line 307.

I attached the file.. Please help!!

[Chas]

Hi Joshua44 ,

You should rethink your code. There is a lot of repetition that doesn't need to be there. Try something like this:

<script>
//mouseOver on & off images
img22off = new Image(); img22off.src = "images/2-2-off.jpg";
img22on  = new Image(); img22on.src  = "images/2-2-on.jpg";

img24off = new Image(); img24off.src = "images/2-4-off.jpg";
img24on  = new Image(); img24on.src  = "images/2-4-on.jpg";

// add the rest of your images here.  Keep the same 
// naming convention going.

//mouseOver image swap
function over(img) {
  document[img].src = eval(img + "on.src");
}

//mouseOut image swap
function off(img) {
  document[img].src = eval(img + "off.src");
}
</script>

Your html should look like this:

<a href="ps/" 
  onMouseover="over('img22');"
  onMouseout="off('img22');">
<img src="/images/2-2-off.jpg" name="img22" border="0" width="108" height="58"></a>

The important part of the code is to keep the naming convention for the image objects. The on and off part of the name is what you need to worry about. This way you only need one function for all of your overs and offs instead of a separate function for each rollover like you have.

Let me know if you need me to explain the code better.

Regards,
Charlie

[Joshua44]

Thanks soooooooooooooooooooooooo much, everything's fine now!
I still can't figure out what was wrong, but this is a better code... thanks!!