Как отобразить изображение GIF, когда mosehover на точку в другом изображении в HTML, CSS

У меня есть карта с некоторыми местами, отмеченными оранжевой точкой.

Карта находится в "jpg" формат изображения.

Я разместил его на своем веб-сайте, теперь я хочу отобразить другое анимированное изображение GIF, когда кто-то mousehover конкретная оранжевая точка на изображении карты. Обратитесь к картинке ниже. GIF-изображение, отображаемое в каждой точке, отличается.

помогите мне решить эту проблему, используя HTML, CSS, JAVASCRIPT, Нажмите на ссылку ниже, чтобы увидеть картинку.

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

Источник

2 ответа

Вы можете использовать карту изображений в сочетании с одним или несколькими DIV, которые вы показываете или скрываете, и при необходимости меняете положение ваших DIV с помощью JavaScript при наведении курсора мыши.

маленький пример

<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) - я бы не советовал, потому что это много работы

Источник

Вы можете использовать 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>
Источник
Другие вопросы по тегам