How do I highlight parts of an imagemap on mouseover?

Question

I need to display an imagemap with about 70 areas in it. The area of the imagemap the mouse cursor is currently at is supposed to be highlighted in a certain color.

Is this possible and if yes, how?

Oh I think I found something nice which will do the job for me: http://plugins.jquery.com/project/maphilight — Maximilian, Jul 29 '09 at 15:50
updated link https://davidlynch.org/projects/maphilight/docs/ — ashleedawg, Feb 19 '20 at 13:02

score 13 · Accepted Answer · answered Jul 31 '09 at 19:07

13

After actually using it in production I'd say this is the answer: http://plugins.jquery.com/project/maphilight

Using this it takes a few lines of code to implement that feature for any imagemap.

answered Jul 31 '09 at 19:07

Maximilian

4,728
5
29
28

Can we have the highlight always appearing on the some areas of the map? i meant without hover ? – gkns May 03 '12 at 06:05
3

The link is dead - any new link? – Samik R May 26 '14 at 16:08
3

In case, if anyone is looking for that plugin, check this link - https://github.com/kemayo/maphilight – Saeed Salam Jan 08 '20 at 16:10

ScottE · Answer 2 · 2009-07-29T15:36:41.290

Yes, this is possible. I've done the exact thing with jquery and the image map area mouseenter / mouseleave events, but not with 70 areas. It will just be more work for you. You may consider loading the images via ajax calls on the mouseover, or using a sprite and positioning so you don't need to load 70 images into the 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;
    });

});

Where .map-hovers is a div that has all the images that you want to lay over top of your map. You can position them if necessary, or make the image the same size as the image map, but with transparency.

And some html to follow:

NOTE: Notice how the image map area index lines up with the img index within the map-hovers container? ALSO: The image map must point to a transparent gif, and have the background image set to the actual image you want to display. This is a cross-browser thing - can't remember the exact reason.

<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>

Thanks! Since I can generate those images it's not really that much more work. — Maximilian, Jul 29 '09 at 15:47
I've been using your answer to create an image map that highlights various parts on mouseover, but it's not working quite right. What's happening for me is that the correct images do appear as I do my mouseover, but they're appearing directly below the original image I'm hovering over. So, using your code as a reference point, if I move my mouse over parts of the `/images/trans.gif` image, all the correct images appear *below* that on the page, rather than appearing as if the image itself (the one with the mouse over it) is changing. I was hoping you might have some suggestions/thoughts? — Monomeeth, Jul 03 '17 at 05:38

score 5 · Answer 3 · answered May 03 '18 at 13:35

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>

score 2 · Answer 4 · answered Nov 19 '12 at 22:22

I tried to use ScottE's solution but unfortunately that meant adding the target image as a body background.

My solution is very close to his, but uses proper images

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;
    });

});

The key concept here is that once you enter the map area, you show the map-hovers image, which then becomes your active layer under the mouse - Simply detecting when you leave that image is what make is smooth.

HTML: (almost the same, no need for trans image)

<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>

score 1 · Answer 5 · answered Jul 29 '09 at 15:28

I don't know if there's a cool way to do it, but you could take your picture as background image of a block element, overlay it with a transparent picture and your image map and then replace this transparent picture on a mouseover event with a picture the area is highlighted in.

On the downside you'll need 70 images of highlighted areas

Naga Kiran · Answer 6 · 2022-07-15T07:03:06.267

react-img-mapper plugin provides this functionality and can specify the highlight color required in map config

Demo link

Sample map json: We can specify the fillColor and strokeColor for each area in image map.

[
  {
    "id": "469f9800-c45a-483f-b13e-bd24f3fb79f4",
    "title": "Hardwood",
    "shape": "poly",
    "name": "1",
    "fillColor": "#eab54d4d",
    "strokeColor": "black",
    "coords": [
      175,9,232,9,232,58,175,58,175,9
    ]
  },
  {
    "id": "1db62daa-22a4-4b02-b5c0-fffdcf77c66c",
    "title": "Carpet",
    "shape": "poly",
    "name": "2",
    "fillColor": "#eab54d4d",
    "strokeColor": "black",
    "coords": [
      120,9,175,9,175,58,120,58,120,9
    ]
  }
]

How do I highlight parts of an imagemap on mouseover?

6 Answers6

Linked