鼠标悬停在图像的特定部分时图像发生变化

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

您可以使用图像映射。例如：

<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>

让 js :

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

Answer 2

您指的是使用this的图像，但this实际上指的是触发鼠标事件的元素，即<area>； <area> 标签没有可以使用 javascript.

设置的 src 属性

您需要以不同方式引用图像，例如使用 class 或 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>

（同时放弃 <area> 标签上的 width 和 height 属性）

鼠标悬停在图像的特定部分时图像发生变化

image change on mouse hover on particular part of image

html

javascript

css

frontend

web