Карта изображений при наведении на изображение

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

По сути, я хочу, чтобы изображение отображалось как элемент наведения, когда вы наводите указатель мыши на определенные координаты, которые были назначены. Большинство документации/вопросов, которые я читал, связаны с наведением контура, то есть область отображения будет выделена. Я использую плагин Jquery, который позволяет изменять размер изображения при сохранении правильных координат, поэтому я не использую какие-либо другие, которые обычно позволяют выделять контур при наведении.

Я знаю, что вы можете изменить определенные атрибуты элемента в базовом html/css с помощью: hover и т. д., однако я не думаю, что это аналогичная ситуация из-за характера карты изображений. Можно ли просто отображать изображение при наведении мыши/щелчке по обозначенной области на карте изображения?

Я также изучил использование Photoswipe (которое я реализовал в галерее на отдельной странице), чтобы позволить пользователям щелкать определенные области и отображать пользовательский интерфейс Photoswipe. Это было бы предпочтительнее, если это возможно, из-за более гладкого пользовательского интерфейса и простоты добавления субтитров.

Код изображения:

<div class="sitebox">
<img name="aerialmap" src="images/aerial2.jpg" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
    <map name="aerial2">
        <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
        <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" title="Building 2">
    </map>

Image map resizer:

https://github.com/davidjbradshaw/image-map-resizer

Если потребуется больше кода, чтобы получить представление о том, что я сейчас реализовал, я предоставлю его.


jquery css hover imagemap photoswipe
person Randorile    schedule 08.11.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, это то, что вам нужно

$("area").mousemove(function(e) {
    $("#image").show().css({
        left: e.pageX + 10,
        top: e.pageY + 10
    });
});
$("area").mouseout(function(e) {
    $("#image").hide();
});
#image{
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sitebox">
    <img name="aerialmap" src="http://www.getmapping.com/sites/default/files/styles/post_image/public/quick_media/getmapping_aerialimagery_vertical_hamptoncourt_1_0.jpg?itok=tNmyWk21" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
    <map name="aerial2">
        <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
        <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" title="Building 2">
    </map>
</div>
<img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG" />

ИЗМЕНИТЬ

Вот fiddle с разными изображениями для каждого area. Каждая область имеет атрибут data-image для соответствующего URL-адреса изображения.

https://jsfiddle.net/ergec/gse19j0b/

person Ergec    schedule 10.11.2016
comment
Похоже, это работает, хотя мне понадобится несколько изображений в зависимости от того, какая координата зависает. Легко ли это сделать? - person Randorile; 11.11.2016
comment
@Randorile обновил мой ответ. Проверьте скрипку в самом низу моего ответа. - person Ergec; 11.11.2016
comment
Отлично, спасибо за помощь. Я думаю, что я буду использовать некоторую комбинацию наведения/щелчка для доступа к полному изображению и просто использовать наведение для идентификации по имени. - person Randorile; 11.11.2016

arrow_upward
0
arrow_downward 

<script>
    function MO(x){
        document.getElementById("a").innerHTML=x=='ov'?"<img src=\"http://www.w3schools.com/jsref/smiley.gif\"></img>":"";
    }
</script>
<div class="sitebox">
<img name="aerialmap" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/290px-Lion_waiting_in_Namibia.jpg" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
<map name="aerial2">
    <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
    <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" border="2" title="Building 2" onmouseover="MO('ov')" onmouseout="MO('ou')">
</map>
</img></div>
<div  id="a"></div>

Это помогает?

person TROUZINE Abderrezaq    schedule 08.11.2016
comment
Спасибо, ребята, меня не было несколько дней, позвольте мне проверить, и я вернусь к вам. - person Randorile; 11.11.2016