In this post, I will show you step by step how you can make an interactive image map and highlight each area of images when mouseover. As you may see in the post's thumbnail is a map of my country, Cambodia, I want to implement code when a user using a mouse and put over the map by each province, it will highlight around the border of the province. If users click it will show detailed information about the province. You also can implement this as well just using HTML5, jQuery, and Tool which I will describe below

STEP 1: Add attribute "usemap" in your img tag & map tag

HTML5 provides an additional attribute "usermap" to IMG tag for dividing areas of the image that you will refer to an id of a map tag where you will define the coordinate of the areas.

<img src="./img/camera 1.png" alt="" usemap="#image-map" class="maparea"/>
<map name="image-map" id="image-map"></map>

STEP 2: Define Area's Coordinate

Using image map https://www.image-map.net/ can easily upload your image and select areas you want to get the coordinate. It provides you 3 shapes to annotate on the image: rect, poly, and circle. In this case, we will use poly to annotate the province as seen below

Once you have done, click on the button Show Me The Code then you will get the coordinate of the annotated province.

Copy and paste the coordinate inside the tag map

<img src="./img/camera 1.png" alt="" usemap="#image-map" class="maparea"/>
<map name="image-map" id="image-map">
<!-- BMC -->
<area target="" alt="Banteay Meanchey" title="Banteay Meanchey" href="{{url('/province/01')}}" coords="55,150,91,152,92,162,98,159,122,164,129,161,139,160,146,158,152,163,160,162,167,163,172,164,172,155,174,146,170,135,176,128,174,117,174,110,176,103,171,100,164,89,157,96,151,99,146,92,148,86,151,80,142,79,137,75,130,64,122,66,120,73,117,80,117,88,108,93,102,100,96,115,91,120,80,125,77,130,84,135,77,139,68,140,56,138,52,142" shape="poly">
<!-- BAT -->
<area target="" alt="Battambang" title="Battambang" href="{{url('/province/02')}}" coords="54,151,53,161,54,168,53,174,57,183,62,194,67,200,72,205,79,203,80,196,89,194,95,199,98,205,98,217,98,234,89,241,81,243,74,245,82,251,88,257,95,264,99,269,101,275,107,275,114,273,121,272,126,266,130,271,138,269,151,261,161,258,174,258,183,264,189,262,195,262,198,255,199,248,196,238,199,230,199,224,205,220,209,216,208,208,213,205,207,197,206,186,206,179,198,173,188,169,171,165,148,161,134,161,124,165,106,161,97,159,92,163,90,152" shape="poly">
</map>

STEP 3: Apply Mouseover Effect

All you have to do is to import the library of jQuery and Maphilight

<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Maphighlight Script -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>

Create function follow document of maphilight

$(function() {
    $('.maparea').maphilight();
});

Highlighting images on mouseover is one of the cool features that you can do with HTML5 and jQuery. It’s possible to also change the color of the highlight and to add a link to direct the user to a different part of your webpage.

You can check the example at https://geo.nestcode.co That's it, thank you for reading. 

THANK YOU, Find Us @
Facebook
Telegram
Twitter
LinkedIn