使用onmouseover將文本超鏈接更改爲圖像超鏈接？

請耐心等待我是學習javascript的新手（自學）！我通常是一個從我的網頁瀏覽器上自己找到答案，但到目前爲止我還沒有找到任何資源來解釋如何完成以下步驟：使用onmouseover將文本超鏈接更改爲圖像超鏈接？

所以，基本上我想要做的就是改變這個（HTML）：

<a href="link.html"id="speaker"onmouseover="showImage()"onmouseout="goBack()">SPEAKERS</a>

轉到使用javascript的圖像。

圖像保存在與html和js相同的文件夾中。這是因爲據我所知，一起去的JavaScript：

function showImage() 
{ 
picture = new Image(100,100); 
picture.src = "icon2.png"; 
document.getElementById("speakers").innerHTML = picture.src; 
    } 

function goBack() 
{ 
document.getElementById("speakers").innerHTML="SPEAKERS"; 
}

爲清楚起見，所有我想要做的是改變文本（「揚聲器」）使用「的onmouseover」，而使用相同的圖像超鏈接。

這似乎是一個非常簡單的問題，但我不知道足以確定我想要做什麼甚至是可能的。如果這不可能，那我就想知道任何一種方式; P。提前致謝！

來源

2012-09-08 Jesse Baker

使用jQuery是一個選項？ – davidbuzatto

@davidbusatto：我還沒有學過jQuery，所以沒有大聲笑。如果我需要學習jQuery來做到這一點，請讓我知道。我不想浪費任何時間。 –

你不需要學習jquery，但是如果你想嘗試它，我已經包含了一個低於 –

如果你確定與使用jQuery，你可以使用.html()和.hover()

http://jsfiddle.net/u8fsU/

來源

2012-09-08 02:12:58

我認爲我的網絡瀏覽器可能是一個錯誤。我檢查了小提琴，當我將鼠標懸停在「揚聲器」上時就消失了。沒有圖像:(。 –

這可能是你的瀏覽器沒有及時加載圖像，它會被緩存在我的瀏覽器中，但不會在你的瀏覽器中，IE7仍然可以使用這個功能 –

好吧，這聽起來像我需要學習jQuery 。非常感謝你的幫助！ –

嘗試這樣的事情讓你開始（不完整的，也沒有測試的解決方案）：

var showImage = function(){ 
    var picture = document.createElement("img"); 
    picture.src = "icon2.png"; 
    picture.href = "link.html"; 

    var speakers = document.getElementById("speakers"); 
    speakers.parentNode.replaceChild(speakers, picture); 
}

請參閱https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference一個很好的參考一些可用的DOM屬性和方法。

來源

2012-09-08 02:04:06 ziesemer

的jquery選項，它看起來會工作......但它甚至不改變SPEAKERS？我的網絡瀏覽器能成爲一個因素嗎？我正在使用IE7？ –

使用onmouseover將文本超鏈接更改爲圖像超鏈接？

回答

相關問題