Question

我有两个图像交换功能，一个在Firefox中工作，另一个不在。交换功能是相同的，在IE中都可以正常工作。 Firefox甚至不会将图像识别为超链接。我很困惑，我希望有人可以为我阐明这一点。非常感谢您提供任何帮助。

仅供参考：工作脚本通过DIV元素交换onClick，非工作脚本通过“a”元素交换onMouseOver / Out。请记住，这两种工作在IE中都很好。

约书亚

在FF中使用Javascript：

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

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

Answer 1

你的两个例子都适合我，虽然它们是古代Netscape 3时代编码的非常不具吸引力的例子。

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

数组是0 - 已编入索引。目前，您的循环将尝试访问aryImages[0]并获得undefined，这将尝试（并失败）预加载。今天new Array构造函数很少使用。而是使用数组文字：

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

也：

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

我们不会这样做，或者<img name>不再这样做。首先，为图片提供id属性，然后使用document.getElementById()访问该图片。

否则，当图像名称与页面上的文档属性和其他命名项冲突时，这会导致各种问题。也许你有一个名字冲突问题，在我们看不到的文件的一部分中称为“家”的东西。虽然如果“甚至不能将图像识别为超链接”意味着你没有让指针改变链接或显示链接地址，我怀疑你实际得到的是我们在这里看不到的代码中的布局问题，你不小心将另一个元素放在导航的顶部，因此无法点击它。

无论如何，将图像加载到这样的元素中的可管理性，可用性和可访问性都很差。使用图像的常规链接（这样它们可以在没有JavaScript的情况下工作）并在顶部添加渐进增强JS，例如：

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

同样，如今大多数人都使用CSS背景图片进行简单的翻转。如果您使用CSS Sprites，则甚至不需要两个单独的图像，因此不需要预加载或任何类型的JavaScript。

Answer 2

检查Firebug是否有错误 - 控制台会告诉您它是否遇到任何JS错误，Net面板会告诉您是否有任何请求失败。

Answer 3

为什么不将事件放在图像而不是链接上，看看是否有帮助？像：

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

和

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

Answer 4

刚检查过这个。如果您使用的是XHTML，它可能不是损坏的JavaScript，而是您的标记：XHTML需要以小写形式指定标记和属性。我认为，IE在其强烈要求的标准支持中可能部分忽略了这一点，并按照您的想法评估后一个示例。但是，Firefox，你知道，它更符合标准，可能会将其视为格式不正确的属性而忽略它。

像：

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

请注意，这可能不是解决方案，只是一个可能的问题。

Answer 5

Bobince提出了许多经过深思熟虑和正确的建议来纠正和增强我的代码。为此，我非常感激。他建议，因为链接没有被识别，我可能有一个覆盖菜单的元素。他100％正确。菜单下方的标题DIV的高度设置为“自动”，这使得它从文档的顶部向下覆盖到标题的底部。这涵盖了菜单，FF不允许访问它下面的链接。我对高度进行了快速调整，并为正确放置添加了上边距，现在可以访问我的菜单了。当我在Firebug中没有得到任何JS错误时，我以为我会发疯。这个想法从来没有想到要检查一个重叠的元素。谢谢MILLION Bobince !!!

感谢大家的建议和帮助。

为什么两个相同的Javascripts中的一个在Firefox中有效？

5 个答案: