onmouseover事件不适用于Firefox

Question

我正在使用在上面提供图像的按钮。 我想使用javascript在鼠标悬停时更改图像。 我的代码在Chrome上运行正常，但在Firefox上却无效。 请帮忙。

这是代码

使用Javascript

   function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
    if (document.images[i].parentNode.tagName == "BUTTON") {
        setupRollover(document.images[i]);
    }
}
}
function setupRollover(thisImage) {
    thisImage.outImage = new Image();
    thisImage.outImage.src = thisImage.src;
    thisImage.onmouseout = rollOut;

thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.alt + "1.png";
thisImage.onmouseover = rollOver;


thisImage.parentNode.childImg = thisImage;
thisImage.parentNode.onblur = rollOutChild;
thisImage.parentNode.onfocus = rollOverChild;
}

function rollOut() {
    this.src = this.outImage.src;
}

function rollOver() {
    if(prevFlag == 0 && this.id==previous1)
    {
        return;
    }
    if(nextFlag == 0 && this.id==next1)
        return;

    this.src = this.overImage.src;
}

HTML

    <button id="prevLinkSimplyP" class="previous"><img src="images/previous.png" height="50" width="50" id="previousSimplyP" alt="previous"/></button>
<button id="startAgainSimplyP" class="reload"><img src="images/reload.png" height="50" width="50" id="reloadSimplyP" alt="reload" /></button>
<button id="nextLinkSimplyP" class="next" ><img src="images/next.png" height="50" width="50" id="nextSimplyP" alt="next"/></button>

Answer 1

您确定要在Firefox中启用Java脚本吗？ 。http://support.mozilla.com/zh-CN/kb/Javascript请点击此链接。

另一种使用jQuery的方式。

Answer 2

冒被指控未能正确回答问题的风险，为什么不使用JQuery解决此问题呢？ 您不仅可以将代码减少到几行，而且可以在所有浏览器中使用：

http://api.jquery.com/mouseover/

这里有一些鼠标悬停/鼠标完全按照您描述的方式工作的示例。 我的建议是学习JQuery，因为它可以节省大量时间，避免使用原始JavaScript进行试验。

我还想指出，alt属性通常包含要在未加载图像或用户代理加载未呈现图像的页面时显示的文本。 我也了解，当Google Bot无法扫描图片上的文字时，它具有SEO优势。

至于您的问题，我没有看到定义的以下函数rollOutChild和rollOverChild：

   thisImage.parentNode.onblur = rollOutChild;
   thisImage.parentNode.onfocus = rollOverChild;

Answer 3

尝试这个

if (document.images[i].parentNode.tagName.toLowerCase() == "button") {
    setupRollover(document.images[i]);
}

我认为您的问题可能与Firefox试图仅将标签名称大写匹配有关。

Answer 4

使用jQuery，它与所有类型的浏览器兼容。