Image Rollovers That Aren't Supposed to be Image Rollovers

Hello,

First off, thank you so much to everyone that has helped me with overcoming my Javascript disability... As a designer, my journey into this foreign land has been scary and oftentimes a little overwhelming.

Having said this, my problem is as follows. I have a a script for image rollovers:

// JavaScript Document
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 = "rollOvers/" + thisImage.id + "_on.jpg";
thisImage.onmouseover = rollOver;
}

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

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

So basically the idea is that if the image has an "A" tag for a parent, and an id, than that image rolls over. The problem is that all images with an "A" tag for a parent, even the ones that aren't supposed to rollover, flash sporadically. It's as if the browser is trying to make a rollover out of every image that has a link.

The HTML for an image this is supposed to rollover looks like this:

<a href="http://www.appleblossom.org/" onclick="LinkAlert();return true" onmouseover="rollOver()" onmouseout="rollOut()" title="Apple Blossom Festival" class="no_border" target="_blank"><img src="rollOvers/appleBlossom_off.jpg" alt="Buy tickets for the Apple Blossom Festival" width="150" height="100" id="appleBlossom" />Apple Blossom Festival</a>

The HTML for an image this is NOT supposed to rollover looks like this:

<a href="http://mvmvideo.com/"><img src="border/mvm_logo.png" border= "none" width="170" height="122" alt="Designed by Magaurn Video Media" /></a>


The actual page is live and can be found by going to: http://mvmvideo.com/funtastic/buy_carnival_tickets.html

If anyone can help me solve this problem, it would be terrific because I use this script for rollovers on all of my sites now and they all have the same problem.

THANK YOU, THANK YOU, THANK YOU!

I tested this in Firefox 3 and IE 7 and did not witness this behavior.

But just to throw something out there -- you don't need to use javascript for this -- it can be done with CSS using background images for the links, and having the "rollover" image as the background on hover.

I believe the problem is that your "rolloverinit()" event targets all Anchor elements, not just the ones with IDs. Simply add a unique name to each anchor element of the image you want to roll over, then use document.anchors instead of document.images to reference the elements.

Code:

---

function rolloverInit() {
for (var i=0; i<document.anchors.length; i++) {
if (document.anchors[i].name == "RollOverBeethoven") {
setupRollover(document.anchors[i]);
}

---