gpt4 book ai didi

javascript - 如何在 HTML 和 CSS 中将鼠标悬停在另一个图像中的一个点上时显示 GIF 图像?

转载 作者:行者123 更新时间:2023-11-28 15:27:43 25 4
gpt4 key购买 nike

我有一张 map ,其中一些位置用橙色圆点标记。

map 为.jpg 图片格式。

我把它放在我的网站上,现在我想显示另一个 gif 动画图像,当有人悬停在 map 图像中的特定橙色点上时。请参阅下面链接中的图片。每个点要显示的gif图片都不一样。

帮助我使用HTMLCSSJavaScript解决这个问题。

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com