Как сделать всплывающую картинку при наведении на другую?

Question

[Friend]

Пробовал сделать таким образом

<a id="pointmap"><img src="{% static "static/style/pointmap.png" %}"></a>

#pointmap:hover {
    background: url(mapvi.jpg);
    width: 300px;
    height: 300px;
    position: fixed;
    top: 10px;
    left: 30%;
}

Но ничего не получилось, как это можно реализовать?

Answer 1

[Friend]

Сделал через события

<span style="position: absolute; left: 820px; top: 63px;">
                    <a onmouseout="document.getElementById('pop-up-map').style.display='none'" onmouseover="document.getElementById('pop-up-map').style.display='block'" target="_blank" href="https://yandex.ua/maps/?lang=ru&ll=30.325693%2C50.172746&z=18&mode=whatshere&whatshere%5Bpoint%5D=30.326832%2C50.173075&whatshere%5Bzoom%5D=19">
                        <img src="{% static "static/style/pointmap.png" %}">
                    </a>
                    <span id="pop-up-map" style="position: absolute; top: -30px; left: -318px; display: none;">
                        <img src="{% static "static/style/mapvi.jpg" %}">
                    </span>
                </span>

Answer 2

[iBird Rose]

https://jsfiddle.net/ohnbLc26/

Comments

[Friend]

Смотри к примеру есть картинка 16*16 пикселей, при наведении на нее отображается независимая ни от чего картинка, не меняет картинку, а отображает еще одну, как то так

[yakupov112]

где отображает?