Why does one of two identical Javascripts work in Firefox?

Posted by Gigpacknaxe on Stack Overflow See other posts from Stack Overflow or by Gigpacknaxe
Published on 2010-05-28T23:06:56Z Indexed on 2010/05/28 23:12 UTC
Read the original article Hit count: 140

Filed under:
|

Hi,

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 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>

<div><a href="mich-prim-102-large.php"><img src="/tires/images/super_view.jpg" border="0" /></a></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>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html