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>
