Javascript 希望图像和文本在第节的MouseOver上更改吗

我试图在我的wordpress网站上编写HTML代码，以显示文本，并在浏览某个部分时更改鼠标悬停的图片

我可以看到超链接部分，但无法更改图片或显示文本，我的代码有什么问题

<script type="text/javascript">// <![CDATA[
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
// ]]></script>
<img alt="DogAnatomy" src="http://www.knowyourcompanion.com/wp-content/uploads/2014/04/DogAnatomy-1024x791.png" usemap="#planetmap" width="1024" height="791" />

<map name="planetmap">

<area onmouseover="this.src='http://www.knowyourcompanion.com/wp-content/uploads/2014/04/DogAnatomyEars.png'" onmouseout="this.src='http://www.knowyourcompanion.com/wp-content/uploads/2014/04/DogAnatomy-1024x791.png'" alt="Sun" coords="163,90,  163,82,  159, 67,  155,55,  152, 42,  152,27,  155 23, 160,25,  165,32, 169,38,  173,46,  171,34,  171,24,  175, 16,  180,15,  189,20,  195,29,  199,42,  203,53,  212,66,  219, 75,  227,88,  234,98,  237,106,  237,112,  228,114,  217,115,  205,113,  187,109,  176,103" shape="poly" href="sun.htm" target="_blank"  />

<area onmouseover="writeText('The dog's ears are fantastic/! They can hear over eighteen times the distance we can/!')" alt="Sun" coords="163,90,  163,82,  159, 67,  155,55,  152, 42,  152,27,  155 23, 160,25,  165,32, 169,38,  173,46,  171,34,  171,24,  175, 16,  180,15,  189,20,  195,29,  199,42,  203,53,  212,66,  219, 75,  227,88,  234,98,  237,106,  237,112,  228,114,  217,115,  205,113,  187,109,  176,103" shape="poly" href="sun.htm" target="_blank"  />

//

---

注：这只是代码的一部分，因为您正试图从Area元素更改SRC属性

改变这个

<area onmouseover="this.src=...." onmouseout="this.src=..." ...>

还有一个提示：不要在HTML中使用嵌套的javascript代码。尝试为每个元素添加事件侦听器

这是小提琴

---

问题是

当在
标记的
onmouseover
事件中调用此
时，它指的是
标记，因此将更改
标记的
src
属性，而不是


然后在onmouseover中引用：

<img id="dog" alt="DogAnatomy" src="http://www.knowyourcompanion.com/wp-content/uploads/2014/04/DogAnatomy-1024x791.png" usemap="#planetmap" width="1024" height="791" />



您可能还希望在
writeText
函数中转义撇号：
\'

<img id="dogImage" ...>

 writeText('The dog\'s ears...');

<img id="dog" alt="DogAnatomy" src="http://www.knowyourcompanion.com/wp-content/uploads/2014/04/DogAnatomy-1024x791.png" usemap="#planetmap" width="1024" height="791" />

<area onmouseover="document.getElementById('dog').src='http://www.knowyourcompanion.com/wp-content/uploads/2014/04/DogAnatomyEars.png'">