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

のjQueryを使用している、それはブラウザのすべてのタイプと互換性があります。

Answer 2

Firefoxで有効になっているJavaスクリプトについて確かめてください。 http://support.mozilla.com/en-US/kb/Javascriptこのリンクに従ってください。

もう1つの方法として、jQueryを使用できます。

Answer 3

あなたの質問に正しく答えられないと非難される危険がありますが、なぜこの問題を解決するためにJQueryを使用しないのですか？あなただけではなく、わずか数行のコードを減らすことができますが、それはすべてのブラウザで動作します：http://api.jquery.com/mouseover/

あなたが記述どおりに作業をマウスオーバー/マウスアウトのここでの例があります。私の提案は、JQueryを学ぶことです。これは、生のJavaScriptを使った作業の試練に対して頭をはくるのに多くの時間を節約するためです。

alt属性は通常、画像がロードされないか、ユーザーエージェントがイメージをレンダリングしないページをロードしている場合に表示されるテキストを保持していることを指摘します。また、画像上のテキストをGoogle Botがスキャンできない場合、SEOの利点があることも理解しています。

あなたの質問については、私は以下の機能が表示されない、rollOutChildとrollOverChild、定義された：

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

Answer 4

この

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

を試してみて、私はあなたの問題はしようとFirefoxのに関連することができると思いあなたのタグの名前を大文字のみと一致させる。