Why does one of two identical Javascripts work in Firefox?

I have two image swap functions and one works in Firefox and the other does not. The swap functions are identical and both work fine in IE. Firefox does not even recognize the images as hyperlinks. I am very confused and I hope开发者_JAVA技巧 some one can shed some light on this for me. Thank you very much in advance for any and all help.

FYI: the working script swaps by onClick via DIV elements and the non-working script swaps onMouseOver/Out via "a" elements. Remember both of these work just fine in IE.

Joshua

Working Javascript in FF:

<script type="text/javascript">
    var aryImages = new Array();

    aryImages[1] = "/tires/images/mich_prim_mxv4_profile.jpg";
    aryImages[2] = "/tires/images/mich_prim_mxv4_tread.jpg";
    aryImages[3] = "/tires/images/mich_prim_mxv4_side.jpg";

    for (i=0; i < aryImages.length; i++) {
        var preload = new Image();
        preload.src = aryImages[i];
    }

    function swap(imgIndex, imgTarget) {
        document[imgTarget].src = aryImages[imgIndex];
    }

<div id="image-container">
<div style="text-align: right">Click small images below to view larger.</div>

<div class="thumb-box" onclick="swap(1, 'imgColor')"><img src="/tires/images/thumbs/mich_prim_mxv4_profile_thumb.jpg" width="75" height="75" /></div>
<div class="thumb-box" onclick="swap(2, 'imgColor')"><img src="/tires/images/thumbs/mich_prim_mxv4_tread_thumb.jpg" width="75" height="75" /></div>
<div class="thumb-box" onclick="swap(3, 'imgColor')"><img src="/tires/images/thumbs/mich_prim_mxv4_side_thumb.jpg" width="75" height="75" /></div>

<div><img alt="" name="imgColor" src="/tires/images/mich_prim_mxv4_profile.jpg" /></div>

Not Working in FF:

<script type="text/javascript">

    var aryImages = new Array();

    aryImages[1] = "/images/home-on.jpg";
    aryImages[2] = "/images/home-off.jpg";
    aryImages[3] = "/images/services-on.jpg";
    aryImages[4] = "/images/services-off.jpg";
    aryImages[5] = "/images/contact_us-on.jpg";
    aryImages[6] = "/images/contact_us-off.jpg";
    aryImages[7] = "/images/about_us-on.jpg";
    aryImages[8] = "/images/about_us-off.jpg";
    aryImages[9] = "/images/career-on.jpg";
    aryImages[10] = "/images/career-off.jpg";

    for (i=0; i < aryImages.length; i++) {
        var preload = new Image();
        preload.src = aryImages[i];
    }

    function swap(imgIndex, imgTarget) {
        document[imgTarget].src = aryImages[imgIndex];
    }

                <td>
                <a href="home.php" onMouseOver="swap(1, 'home')" onMouseOut="swap(2, 'home')"><img name="home" src="/images/home-off.jpg" alt="Home Button" border="0px" /></a>
              </td>

Both your examples work for me, though they're pretty unappealing examples of ancient Netscape 3-era coding.

var aryImages = new Array();
aryImages[1] = "/tires/images/mich_prim_mxv4_profile.jpg";

Arrays are 0-indexed. Currently your loop will try to access aryImages[0] and get an undefined, which is will try (and fail) to preload. There is very rarely any use for the new Array constructor today. Instead use array literals:

var images= [
    '/tires/images/mich_prim_mxv4_profile.jpg',
    '/tires...
];

also:

    document[imgTarget].src = aryImages[imgIndex];

We don't do that, or <img name> any more. In preference, give the image an id attribute and access it with document.getElementById().

Otherwise this causes all sorts of problems when image names clash with document properties and other named items on the page. Maybe you've got a name clash problem, something else called “home” in part of the document we can't see. Though if “does not even recognize the images as hyperlinks” means you aren't getting the pointer changing over the links or showing the link address, I suspect what you've actually got is a layout problem in code we can't see here, where you've accidentally positioned another element over the top of the nav so it can't be clicked on.

Anyway, it's poor for manageability, usability and accessibility to be loading images into an element like this. Use normal links to the images (so they work without JavaScript) and add progressive-enhancement JS on top, eg.:

<style type="text/css">
    .thumb { display: block; }
    .thumb img { width: 75px; height: 75px; border: none; vertical-align: top; }
</style>


<a class="thumb" href="/tires/images/mich_prim_mxv4_profile.jpg">
    <img src="/tires/images/thumbs/mich_prim_mxv4_profile_thumb.jpg" alt="" />
</a>
<a class="thumb" href="/tires/images/mich_prim_mxv4_tread.jpg">
    <img src="/tires/images/thumbs/mich_prim_mxv4_tread_thumb.jpg" alt="" />
</a>
<a class="thumb" href="/tires/images/mich_prim_mxv4_side.jpg">
    <img src="/tires/images/thumbs/mich_prim_mxv4_side_thumb.jpg" alt="" />
</a>

<img id="thumbshow" src="/tires/images/mich_prim_mxv4_profile.jpg" alt="" />


<script type="text/javascript">
    // Bind to links with thumb class
    //
    for (var i= document.links.length; i-->0;) {
        if (document.links[i].className==='thumb') {

            // Preload main image
            //
            var img= new Image();
            img.src= document.links[i].href;

            // When clicked, copy link address into image source
            //
            document.links[i].onclick= function() {
                document.getElementById('thumbshow').src= this.href;
                return false;
            }
        }
    }
</script>

Similarly, most people do simple rollovers with CSS background images these days. If you use CSS Sprites, you don't even need two separate images, so no preloading or JavaScript of any kind is necessary.

Check Firebug for errors - the Console will tell you whether it's encountering any JS errors, and the Net panel will tell you whether any requests failed.

Why not put the events on the images instead of the links and see if that helps? Like:

function swap(el, imgTarget) {
    el.src = aryImages[imgIndex];
}

and

<a href="home.php"><img name="home" src="/images/home-off.jpg" alt="Home Button" border="0px" onMouseOver="swap(this, 'home')" onMouseOut="swap(this, 'home')" /></a>

Just checked up on this. If you are using XHTML, it may not be the JavaScript that is corrupt, but your markup: XHTML needs tags and attributes to be specified in lowercase. I assume, that IE in its much-to-desire standards support perhaps partially ignores this, and evaluates your latter example as you think it should. But Firefox, which, you know, is much more standards compliant, may treat this as an improperly formatted attribute and ignores it.

Like:

<div onclick="swap(1, 'imgColor')"></div> <!-- Should work -->
<a onMouseOver="swap(1, 'home')"></a> <!-- May not work -->

Note, that this may not be the solution at all, just a possible issue.

Bobince made many very well thought out and proper suggestions to correct and enhance my code. For that I am very grateful. He suggested that because the links were not being recognized that I probably had an element that was covering over the menu. He was 100% correct. The header DIV below the menu had a height set to "auto" which caused it to cover from the top of the document down to the bottom of the header. This covered the menu and FF would not allow access to the links below it. I made a quick adjustment to the height and added a top margin for correct placement and now my menu is able to be accessed. I thought I was going crazy when I was not getting any JS errors in Firebug. The thought never crossed my mind to check for an overlapping element. Thanks a MILLION Bobince!!!

Thank you to all for your suggestions and help.