Question

我有一张地图，其中一些位置标记为橙色圆点。

地图采用"jpg"图片格式。

我把它放在我的网站上，现在我想显示另一个gif动画图像，当某人mousehover在地图图像中有一个特定的橙色点时。请参考下图。要在每个点中显示的gif图像是不同的。

帮助我使用HTML, CSS, JAVASCRIPT解决此问题。点击以下链接查看图片。

https://drive.google.com/file/d/0B5s1EBTl5WExcUNBTXR0aHFmYjQ/edit?usp=sharing

Answer 1

您可以将图像映射与一个或多个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） - 我不建议这样做因为它做了很多工作

Answer 2

您可以使用iframe显示图片：

<iframe frameborder="0" scrolling="no" width="25" height="25" src="image1.gif" name="imgbox" id="imgbox">

点击一个链接，将在iframe中加载新图片：

<a href="image2.gif" target="imgbox">dot</a>

当鼠标悬停在html，css中另一个图像中的某个点上时，如何显示gif图像

2 个答案: