想要圖像和文字在部分

上更改onmouseover我想在我的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。這只是代碼的一部分

來源

2014-04-04 Monmon

因爲您正在嘗試從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" ...>

這是unnecesary使用兩個在你的代碼中，你可以在改變src屬性後簡單地將調用添加到writeText函數中。

並查看writeText函數的調用，您有單引號未轉義。改變它

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

而只是一個提示：不要使用HTML嵌套的JavaScript代碼。嘗試爲每個元素添加一個事件偵聽器。

這裏的是小提琴

http://jsfiddle.net/D6sC5/

來源

2014-04-04 05:07:30

問題是this的onmouseover事件<area>標籤內調用時，則指的是<area>標籤等都將改變<area>標籤的src屬性而不是像你打算的<img>標籤。的ID添加到IMG：

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

然後引用在的onmouseover：

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

你也可能會想要逃避你撇在writeText功能： \'

來源

2014-04-04 05:08:01 Akurn

想要圖像和文字在部分

回答

相關問題