如何显示一个gif图像，当mosehover在另一个图像中的一个点在html，css

我有一个地图标记为橙色点的一些位置。如何显示一个gif图像，当mosehover在另一个图像中的一个点在html，css

该地图是"jpg"图片格式。

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

帮我用HTML, CSS, JAVASCRIPT解决这个问题。点击下面的链接，查看图片。

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

来源

2014-07-23 Faisal K T

，你应该使用图像映射。 –

像Kyle Emmanuel说的，可以使用图像映射：在这里你可以使用Jquery，在https://www.youtube.com/watch?v=slbAUX78iFI上映射图像 – EasyBB

。 –

-1

您可以使用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>

来源

2014-07-23 06:58:18 LT4BWYM

您可以使用imagemap结合一个或多个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） - 我不会建议，因为它是一个大量的工作

来源

2014-07-23 07:29:27 Styptic

如何显示一个gif图像，当mosehover在另一个图像中的一个点在html，css

回答

相关问题