Results 1 to 2 of 2

Thread: Multiple Image Rollovers On Same Page

  1. #1
    Join Date
    Jul 2009

    Multiple Image Rollovers On Same Page


    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") {

    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!



  2. #2
    Join Date
    Dec 2005

    Lightbulb Something to try.

    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" />
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center