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?

Cinema

Oh I think I found something nice which will do the job for me: plugins.jquery.com/project/maphilight – Cinema

updated link davidlynch.org/projects/maphilight/docs – Fachan

Answer 1

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.

Cinema

Can we have the highlight always appearing on the some areas of the map? i meant without hover ? – Lent

The link is dead - any new link? – Consideration

In case, if anyone is looking for that plugin, check this link - github.com/kemayo/maphilight – Visor

Answer 2

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>

Rivalee

Thanks! Since I can generate those images it's not really that much more work. – Cinema

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? – Boylan

Answer 3

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>

Ouster

Answer 4

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>

Extrados

Answer 5

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

Sirotek

Answer 6

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

Redpencil