onmouseover event not working for 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.

Here is the code

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 = ne开发者_JS百科w 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>

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

And one another way you can use jQuery.

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:

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.

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.

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

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

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.

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