onmouseover事件不适用于Firefox

I am using buttons on which I have given images. I want to change the image on mouseover using javascript. My code is working on Chrome but its not working for firefox. Please help.

我正在使用我给出图像的按钮。我想使用javascript在mouseover上更改图像。我的代码正在使用Chrome，但它不适用于Firefox。请帮忙。

Here is the code

这是代码

Javascript

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

4 个解决方案

#1

Use jQuery, it is compatible with all types of browsers.

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

#2

Are you sure about java script enabled in Firefox .. http://support.mozilla.com/en-US/kb/Javascript follow this link.

你确定在Firefox中启用了java脚本.. http://support.mozilla.com/en-US/kb/Javascript点击此链接。

And one another way you can use jQuery.

另外一种方法是你可以使用jQuery。

#3

At the risk of being accused of not answering your question properly, why don't you use JQuery to solve this problem? You can not only reduce the code to just a few lines, but it will work in all browsers:

有可能被指责没有正确回答你的问题，你为什么不用JQuery来解决这个问题呢？您不仅可以将代码减少到几行，而且可以在所有浏览器中使用：

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

There are examples here of a mouseover/mouseout working exactly as you describe. My suggestion is to learn JQuery as it will save you a lot of time beating your head against the trials of working with raw JavaScript.

这里有一个鼠标悬停/鼠标移开工作的例子，正如你所描述的那样。我的建议是学习JQuery，因为它可以为您节省大量时间，而不是使用原始JavaScript。

I also want to point out that alt attributes typically hold text to be displayed in the event that your images don't load or a user agent is loading your page that doesn't render images. I also understand that it has SEO benefits when text on images cannot be scanned by the Google Bot.

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

As for your question, I don't see the following functions, rollOutChild and rollOverChild, defined:

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

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

#4

Try this

尝试这个

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

I think your problem could be related to Firefox trying to match your tag's name uppercase only.

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

#1