Question

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

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