在圖像上使用onmouseover更改文本？

我希望文字根據用戶懸停在哪個圖像而改變。我認爲我有正確的想法，但代碼不起作用。在圖像上使用onmouseover更改文本？

HTML

<p id="test"> 
some text 1 
</p> 
<div id="image1" onmouseover="change1()"> 
    <img src="http://www.helpinghomelesscats.com/images/cat1.jpg"> 
</div> 
<div id="image2" onmouseover="change2()"> 
    <img src="http://cvcl.mit.edu/hybrid/cat2.jpg"> 
</div>

function change1() { 
    document.getElementById("test").innerHTML = "this is a cute cat"; 
} 
function change2() { 
    document.getElementById("test").innerHTML = "this is a cuter cat"; 
}

感謝

來源

2012-10-12 sway

的jsfiddle使用您的代碼匿名函數包裝，除非另行指定（看一下左邊的選項欄中）：http://jsfiddle.net/6V2TL/4/ – Blender

沒錯。將下拉列表的值從「onLoad」更改爲「no wrap（head）」，並且Javascript工作得很好。 –

你的代碼是內部和onLoad處理函數，它不能從頁面上運行。左側的第一個下拉菜單改變了這一點，請從列表中選擇「無包裝（頭）」。

演示：http://jsfiddle.net/SO_AMK/35s4C/

function change1() { 
 
    document.getElementById("test").innerHTML = "this is a cute cat"; 
 
} 
 

 
function change2() { 
 
    document.getElementById("test").innerHTML = "this is an angry cat"; 
 
}

<p id="test"> 
 
    some text 1 
 
</p> 
 

 
<div id="image1" onmouseover="change1()"> 
 

 
    <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg"> 
 

 
</div> 
 

 
<div id="image2" onmouseover="change2()"> 
 
    <img src="http://lorempixel.com/output/cats-q-c-640-480-2.jpg"> 
 
</div>

來源

2012-10-12 20:27:32

謝謝！這有很大幫助。 – sway