Multiple Image Rollovers On Same Page

[MultiMediaMan]

Hello,

I have a script for writing multiple image rollovers in an external javascript file.

The javascript file looks like this:

// 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 = "images/gfx/rollOvers/" + thisImage.id + "_on.png";
thisImage.onmouseover = rollOver;
}

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

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

An example of the the html looks like this:

<div class="place_arrowNext">
<a href="gg_foliage_service_testimonials2.html"><img src="images/gfx/rollOvers/testimonialNext_off.png" width="190" height="50" border="0" alt="Read Next Testimonial" id="testimonialNext" /></a></div>

The class, "place_arrowNext" is only used for positioning the arrow on the document. The id, "testimonialNext" is what connects the image to the external javascript file. All of this is online and can be found at: http://gginteriors.com/gg_foliage_se...timonials.html

The problem I'm having, is that on my browser (the latest version of Firefox), the images with a parent node of "A" that aren't meant to be rollovers flash when you roll over them. They flash between the original image and the alt tag, like the browser thinks they are rollovers. The G&amp;G Interiors logo for example in the upper left corner of the document is an image with a link that is NOT a rollover.

How do I specify which images are supposed to be rollovers and which ones aren't?

Thank you, thank you, thank you!


Regads,

MultiMediaMan

[JMRKER]

While this is not the way I would approach the problem initially,
you might try changing to this in the JS portion:

function rolloverInit() {
  for (var i=0; i<document.images.length; i++) {
    if (document.images[i].parentNode.tagName == "A") {
      if (document.images[i].parentNode.getElementById('LogoImage').id != 'LogoImage' ) { setupRollover(document.images[i]); }
    }
  }
}

and change this line in the HTML

<a href="index.html" id="LogoImage">
 <img src="images/gfx/rollOvers/gg_interiors_logo_nav_on.png"
   width="160" height="100" border="0" alt="Go to G&amp;G Interiors Home Page" 
   title="Go to G&amp;G Interiors Home Page" />
</a></div>

Trying to keep your approach as much as possible.
All of above code is untested so it might need a bit of tweeking, especially around the 'parentNode' stuff.

The goal is to use the search for the <A> tag names to effect all images EXCEPT FOR the Logo image.
The problem is not related to FF, but to the rolloverInit functions approach to change the images.

If none of the above works, I'll send my approach to the problem, if interested.