2011-01-13 110 views
1

我正在使用我已經給出圖像的按鈕。我想使用javascript更改mouseover上的圖像。我的代碼正在使用Chrome,但它不適用於Firefox。請幫忙。onmouseover事件不適用於火狐

下面是代碼

的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

我無法看到代碼中定義的mouseover事件 – UVM 2011-01-13 06:34:57

回答

0

使用jQuery,它與所有類型的瀏覽器兼容。

1

冒着被指責不能正確回答您的問題的風險,您爲什麼不使用JQuery來解決這個問題?你不僅可以減少代碼短短的幾行,但它會在所有的瀏覽器:

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

這裏有一個例子鼠標懸停/鼠標移開正是工作你描述。我的建議是學習JQuery,因爲它可以爲您節省大量時間,避免使用原始JavaScript進行試驗。

我還想指出,如果您的圖片無法加載或者用戶代理正在加載您的未呈現圖片的網頁,則alt屬性通常會保留要顯示的文本。我也明白,當Google圖片無法掃描圖片上的文字時,它具有SEO優勢。

至於你的問題,我沒有看到以下功能,rollOutChild和rollOverChild,定義:

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

試試這個

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

我認爲你的問題可能與Firefox的嘗試只匹配您的標記名稱大寫。