2011-01-13 16 views
1

Ich benutze Schaltflächen, auf denen ich Bilder gegeben habe. Ich möchte das Bild bei mouseover mit Javascript ändern. Mein Code arbeitet an Chrome, aber es funktioniert nicht für Firefox. Bitte helfen Sie.onmouseover Ereignis funktioniert nicht für firefox

Hier ist der Code ist

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

Ich kann nicht sehen, ist das Mouseover-Ereignis im Code definiert – UVM

Antwort

0

Verwendung jQuery, ist es mit allen Arten von Browsern kompatibel.

1

Auf die Gefahr, beschuldigt zu werden, Ihre Frage nicht richtig beantwortet zu haben, warum verwenden Sie JQuery nicht, um dieses Problem zu lösen? Sie können nicht nur den Code reduzieren nur ein paar Zeilen zu, aber es wird in allen Browsern funktionieren:

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

Es gibt Beispiele, hier eines Mouseover/mouseout arbeitet genau so, wie Sie beschreiben. Mein Vorschlag ist, JQuery zu lernen, da es Ihnen viel Zeit ersparen wird, Ihren Kopf gegen die Versuche mit roher JavaScript zu schlagen.

Ich möchte auch darauf hinweisen, dass alt-Attribute in der Regel halten Text angezeigt werden, wenn Ihre Bilder nicht geladen werden oder ein User-Agent lädt Ihre Seite, die Bilder nicht gerendert. Ich verstehe auch, dass es SEO-Vorteile hat, wenn Text auf Bildern nicht vom Google Bot gescannt werden kann.

Was Ihre Frage, ich sehe die folgenden Funktionen nicht, rollOutChild und rollOverChild, definiert:

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

dieses Versuchen

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

Ich denke, Ihr Problem zu tun haben werden könnte, um Firefox versuchen um nur den Großbuchstaben Ihres Namens zu entsprechen.

Verwandte Themen