Responsive and Mobile Friendly Image Techniques to Improve your Frontend Development Experience In this blog, I will show you how to use jQuery and HTML5 <map> tag to highlight image areas on mouseover. Step 1: Find an Image You can use any image that you would like. If you want to follow along, you can use this sample of our world. image Photo by on rawpixel Unsplash Step 2: Map the Coordinates An is an image with clickable areas. Image Map Technically speaking, HTML5 image maps are client-side and are made by defining each of the areas in terms of their x and y coordinates Using the , we can easily upload our image, select which areas we want, and auto generate our HTML code. Image Map Generator Using Image Map Generator to select South America As we can see above, I used the Poly shape to select South America. You can also use circle and rectangle. Now that we have our image and map coordinates, the next step is to put it in a code editor and add some Javascript for the mouseover affect. Step 3: Apply jQuery Using as our online HTML/CSS/JS editor, we can paste our code in the HTML section. codepen <img src=" " usemap="#image-map"> https://cdn-images-1.medium.com/max/1600/0*H8odJZNPmo13lEJ2 <map name="image-map"><area target="" alt="" title="" href="" coords="421,528,383,596,424,672,416,828,455,850,486,836,548,726,613,610,581,583,544,568,461,508" shape="poly"></map> The next step is to import two javascript libraries: and . jQuery Maphilight <script src=" "></script><script type="text/javascript" src=" "></script> https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js Following Maphilight’s documentation, we are going to use their function: $(function() {$('.map').maphilight();}); Since we are targeting every object with the class, we need to update our img object to include the map class. map <img src=" " usemap="#image-map" class="map"> https://cdn-images-1.medium.com/max/1600/0*H8odJZNPmo13lEJ2 That’s it! Complete code and working example of using jQuery and HTML5 to highlight image map areas MapHilight + HTML5 <Map> for the Win! 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. Try giving maphilight a shot! If you have another way of doing this or you have any problems with examples above, just drop a comment below to let me know. Thanks for reading — and please follow me here for more interesting software engineering articles!
