Question

我希望有4个小方块（不同颜色）组成一个大方块。当您将鼠标悬停在任何方格上时，颜色会变亮。每个方块都有一个带有多个链接的图像映射。

我使用此方法执行悬停任务

<img src="green_off.png" id="green" onmouseover="document.getElementById('green').src='green_on.png'" onmouseout="document.getElementById('green').src='green_off.png'">

现在，如果我使用图像映射，那么onmouseover就不起作用了。如何同时实现这两个目标？

这是我的代码：

＆＃13;

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

＆＃13;

更新：我发现了问题所在。图像地图上的按钮太大了。我让它们变小了，现在它起作用了。但是，mousover操作仅在图像的未映射部分上有效。有没有办法让它在按钮上工作？

更新＆amp;修复：我刚刚在地图上添加了一个onmouseover动作，现在它一切都很好。这是我的固定代码。

＆＃13;

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

＆＃13;

Answer 1

在我看来，在第一个图像上，onmouseover动作是将图像的不透明度设置为1.但这是默认值，所以实际上没有变化。看起来它不起作用，因为它不会改变任何东西。

在图像映射上使用JS操作

1 个答案: