Как выделить части изображения при наведении курсора мыши? - PullRequest
Новая
       7

Как выделить части изображения при наведении курсора мыши?

14 голосов
/ 29 июля 2009

Мне нужно отобразить карту с примерно 70 областями. Предполагается, что область карты изображения, в которой находится курсор мыши, должна быть выделена определенным цветом.

Возможно ли это, и если да, то как?

Ответы [ 5 ]

13 голосов
/ 31 июля 2009

После фактического использования в производстве я бы сказал, что это ответ: http://plugins.jquery.com/project/maphilight

При использовании этой функции требуется несколько строк кода для реализации этой функции для любой карты изображений.

8 голосов
/ 29 июля 2009

Да, это возможно. Я сделал то же самое с jquery и событиями mouseenter / mouseleave области карты изображений, но не с 70 областями. Это просто будет больше работы для вас. Вы можете загрузить изображения с помощью ajax-вызовов при наведении курсора мыши или использовать спрайт и позиционирование, чтобы вам не нужно было загружать 70 изображений в DOM.

JQuery: 

$(document).ready(function() {

    $(".map-areas area").mouseenter(function() {
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    }).mouseleave(function() {
        $(".map-hovers img").hide();
        return false;
    });

});

Где .map-hovers - это div, в котором есть все изображения, которые вы хотите положить поверх вашей карты. Вы можете расположить их, если необходимо, или сделать изображение того же размера, что и карта изображения, но с прозрачностью.

И немного HTML, чтобы следовать:

ПРИМЕЧАНИЕ. Обратите внимание на то, как индекс области карты изображения совпадает с индексом img в контейнере наведения карты? ТАКЖЕ: карта изображения должна указывать на прозрачный GIF, и фоновое изображение должно быть установлено на фактическое изображение, которое вы хотите отобразить. Это кросс-браузерная вещь - не могу вспомнить точную причину. 

<div id="container">
        <img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png" alt="Sunset Country" />
            <img src="/images/map/north-of-superior.png" alt="North of Superior" />
            <img src="/images/map/algomas-country.png" alt="Algoma's Country" />
            <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
            <img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
            <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
            <img src="/images/map/muskoka.png" alt="Muskoka" />    
        </div>
</div>
    <map name="region-map" id="region-map" class="map-areas">
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
    </map>
2 голосов
/ 20 ноября 2012

Я пытался использовать решение ScottE, но, к сожалению, это означало добавление целевого изображения в качестве фона тела.

Мое решение очень близко к нему, но использует правильные изображения

JQuery: 

$(document).ready(function() {

    $(".map-areas area").mouseenter(function() {
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    });
    $(".map-hovers img").mouseleave(function() {
        $(".map-hovers img").hide();
        return false;
    });

});

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

HTML: (почти то же самое, нет необходимости в транс-изображении) 

<div id="container">
        <img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png" alt="Sunset Country" />
            <img src="/images/map/north-of-superior.png" alt="North of Superior" />
            <img src="/images/map/algomas-country.png" alt="Algoma's Country" />
            <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
            <img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
            <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
            <img src="/images/map/muskoka.png" alt="Muskoka" />    
        </div>
</div>
    <map name="region-map" id="region-map" class="map-areas">
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
    </map>
1 голос
/ 03 мая 2018 
1.Step:Add jquery.min.js
2.Step:Add jquery.maphilight.js
3.Step:Add the $('.map').maphilight(); 


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('.map').maphilight();
  });
</script>

<body>
  <div>
    <div class="imginfo"><span></span></div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" usemap="#image-map" class="map">

    <map name="image-map">
    <area target="" alt="" title="" href="" coords="0,0,144,146" shape="rect">
    <area target="" alt="" title="" href="" coords="152,1,299,146" shape="rect">
    <area target="" alt="" title="" href="" coords="2,149,143,299" shape="rect">
    <area target="" alt="" title="" href="" coords="152,152,300,299" shape="rect">
</map>
  </div>

</body>

</html>
1 голос
/ 29 июля 2009

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

С другой стороны вам понадобится 70 изображений выделенных областей

...