我有一张 map ，其中一些位置用橙色圆点标记。
map 为.jpg 图片格式。
我把它放在我的网站上，现在我想显示另一个 gif 动画图像，当有人悬停在 map 图像中的特定橙色点上时。请参阅下面链接中的图片。每个点要显示的gif图片都不一样。
帮助我使用HTML、CSS、JavaScript解决这个问题。
https://drive.google.com/file/d/0B5s1EBTl5WExcUNBTXR0aHFmYjQ/edit?usp=sharing
最佳答案
您可以将图像映射与一个或多个 DIV 结合使用 您显示或隐藏，如果需要，在鼠标悬停时通过 JavaScript 更改您的 DIV 的位置
一个小例子
<html>
<head>
<style type="text/css">
#myOverlay{visibility:hidden; z-index:10; position:absolute; top:100px; left:100px;}
</style>
<script language="JavaScript">
function showDiv(imgUrl, x, y)
{
var myDiv = document.getElementById("myOverlay"); //get the div element
myDiv.innerHTML = "<img src='" + imgUrl + "' />" //overwrite the content
myDiv.style.top = y; //set position top
myDiv.style.left = x; //set position left
myDiv.style.visibility = "visible"; //show the div
}
function hideDiv()
{
document.getElementById("myOverlay").style.visibility = "hidden"; //hide the div
}
</script>
</head>
<body>
<img src="yourFile.jpg" usemap="#yourMapName"></img>
<map name="yourMapName">
<area shape="rect" coords="11,10,59,29" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage1.gif',59,29);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt1" title="anyTitle1">
<area shape="rect" coords="110,100,159,129" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage2.gif',159,129);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt2" title="anyTitle2">
</map>
<div name="myOverlay" id="myOverlay"></div>
</body>
</html>
或者 您可以将图像绘制为 svg ( http://www.w3.org/2000/svg ) - 我不建议这样做，因为它需要大量工作
关于javascript - 如何在 HTML 和 CSS 中将鼠标悬停在另一个图像中的一个点上时显示 GIF 图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24903538/