Изменение изображения при помощи мыши наведите курсор на частном изображении.

Question

<img src="C:/Users/ma/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png"width="453" height="453" alt="Planets" usemap="#planetmap"> 
<map name="planetmap"> 
<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" alt="Sun" onmouseover="this.src='C:/Users/ma/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch12.png'" width="453" height="453" onmouseout="this.src='C:/Users/ma/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'" width="453" height="453"/> 
</map> 

Я пытаюсь изменить изображение, когда мышь находится над определенной областью изображения. Но это не меняется. вот мой код. Я пробовал это, но он не меняется при наведении изображения.

Answer 1

Вы со ссылкой на изображение с помощью this, но this на самом деле относится к элементу, который вызывает событие мыши, которое является <area>; тег <area> не имеет атрибута src, который вы можете установить с помощью javascript.

Вам необходимо обратиться к образу по-разному, например, с помощью класса или ID:

<img src="image1.png" id="image1" width="453" height="453" alt="Planets" usemap="#planetmap"> 
<map name="planetmap"> 
    <area shape="poly" coords="..." alt="Sun" 
     onmouseover="document.getElementById('image1').src='image2.png'" 
     onmouseout="document.getElementById('image1').src='image1.png'"/> 
</map> 

(и канавы width и height атрибуты на <area> тега, а)

Answer 2

Вы можете использовать изображение карты. Например:

<img src="path/to/picture.gif" width="374" height="162" usemap="#map1" id="image" /> 
<map name="panneaux"> 
    <area shape="rect" coords="92,19,261,66" onmouseover="action1()" alt="john" /> 
</map> 

Et Le Js:

action1() { 
    document.getElementbyId("image").src = "new image"; 
}