我想用 4 个小方 block (不同颜色)组成一个大方 block 。当您将鼠标悬停在任何正方形上时，颜色会变亮。每个方 block 都有一个包含多个链接的图像映射。
我是用这个方法做悬停任务的
<img src="green_off.png" id="green" onmouseover="document.getElementById('green').src='green_on.png'" onmouseout="document.getElementById('green').src='green_off.png'">
现在，如果我将图像映射与它一起使用，onmouseover 将不起作用。如何同时实现？
这是我的代码:
<html>
<head>
</head>
<body>
<img src="green_off.png" id="green" usemap="#greenmap" onmouseover="document.getElementById('green').src='green_on.png'" onmouseout="document.getElementById('green').src='green_off.png'" border=0>
<img src="blue_off.png" id="blue" onmouseover="document.getElementById('blue').src='blue_on.png'" onmouseout="document.getElementById('blue').src='blue_off.png'"border=0>
<br>
<img src="yellow_off.png" id="yellow" onmouseover="document.getElementById('yellow').src='yellow_on.png'" onmouseout="document.getElementById('yellow').src='yellow_off.png'" border=0>
<map name="greenmap">
<area shape="circle" coords="100,100,20" href="https://www.google.com">
<area shape="circle" coords="300,100,20" href="www.youtube.com">
<area shape="circle" coords="100,300,20" href="www.facebook.com">
<area shape="circle" coords="300,300,20" href="www.instagram.com">
</map>
</body>
</html>更新:我知道问题出在哪里了。图像 map 上的按钮太大。我把它们变小了，现在可以用了。但是，mousover 操作仅在图像的未映射部分有效。有没有办法让它也适用于按钮？
更新和修复:我刚刚在 map 上添加了一个 onmouseover Action ，现在一切正常。这是我的固定代码。
<html>
<head>
</head>
<body>
<img src="green_off.png" id="green" usemap="#greenmap" onmouseover="document.getElementById('green').src='green_on.png'" onmouseout="document.getElementById('green').src='green_off.png'" border=0>
<img src="blue_off.png" id="blue" onmouseover="document.getElementById('blue').src='blue_on.png'" onmouseout="document.getElementById('blue').src='blue_off.png'" border=0>
<br>
<img src="yellow_off.png" id="yellow" onmouseover="document.getElementById('yellow').src='yellow_on.png'" onmouseout="document.getElementById('yellow').src='yellow_off.png'" border=0>
<map name="greenmap" onmouseover="document.getElementById('green').src='green_on.png'">
<area shape="circle" coords="100,100,20" href="https://www.google.com">
<area shape="circle" coords="300,100,20" href="www.youtube.com">
<area shape="circle" coords="100,300,20" href="www.facebook.com">
<area shape="circle" coords="300,300,20" href="www.instagram.com">
</map>
</body>
</html>最佳答案
在我看来，在第一张图片上，onmouseover 操作是将图片的不透明度设置为 1。但这是默认值，因此实际上没有变化。看起来它不起作用，因为它没有改变任何东西。
关于javascript - 在图像映射上使用 JS Action ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48613335/