Question

我正在尝试在我的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"  />

PS。这只是代码的一部分

Answer 1

因为您正在尝试从Area元素更改SRC属性。

更改此

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

对于此

<area onmouseover="document.getElementById('dogImage').src=..." onmouseout="document.getElementById('dogImage')=..." ...>

在你的狗img中放一个ID，在这种情况下你可以使用dogImage

<img id="dogImage" ...>

在代码中使用两个区域是不必要的，只需在更改src属性后添加对writeText函数的调用即可。

并查看writeText函数的调用，你有单引号未转义。通过这个改变它

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

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

这里是小提琴

http://jsfiddle.net/D6sC5/

Answer 2

问题是this在onmouseover标记的<area>事件中调用时，指的是<area>标记，因此将更改{{1} src标记的属性，而不是您想要的<area>标记。添加ID到img：

<img>

然后在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" />

您可能还想在<area onmouseover="document.getElementById('dog').src='http://www.knowyourcompanion.com/wp-content/uploads/2014/04/DogAnatomyEars.png'">函数中转义撇号： writeText

希望图像和文本更改onmouseover部分

2 个答案: