HTML Image Maps

With HTML image maps, you can create clickable areas on an image.

An image map is an image with clickable areas. The HTML <map> tag defines an image map. The areas are defined with one or more <area> tags.

<img src="image-mapping-01.jpg" usemap="#image-map">

<map name="image-map">

<area target="" alt="" title="" href="" coords="117,278,502,556" shape="rect">

<area target="" alt="" title="" href="" coords="843,459,628,510,565,721,717,881,929,826,992,617" shape="poly">

<area target="" a lt="" title="" href="" coords="987,465,1104,131,1334,399" shape="poly">

</map>

This website can help you generate the image mapping code:

https://www.image-map.net/

In the demo, I used the flexbox to center the image, and give the image a with of “60vw”.

You can position and scale your imags as you want.

Each <area> can be a link, so you can put your URLs in the href attributes.

Or you can add click/hover events on each of them as well.

Make Your Image Map Responsive

This jQuery RWD Image Maps library allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size when the window is resized.

Go to this Github page and download the code.

https://github.com/stowball/jQuery-rwdImageMaps

You can click the green “Code” button and select “Download ZIP”.

There are two js files in this folder. Drag the "jquery.rwdImageMaps.min.js" file into your Glitch.

You can put in your “p4” folder or just your root folder.

To use this library, you will need to:

Add the jQuery library to your document,

Then link the "jquery.rwdImageMaps.min.js" file we just added to your document,

Finally, add a piece of script that calls the function.

For example, if you added the file into your “p4” folder, you need to add these scripts inside your <head>. (If you put the file in another folder, make sure the URL in the second <script> tag is correct.)

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<script src="/p4/jquery.rwdImageMaps.min.js"></script>

<script>

$(document).ready(function(e) {

$('img[usemap]').rwdImageMaps();

});

</script>

Tips:

When you’re using the jQuery library, you will need to wrap the code inside this code: $(document).ready(function(e) { });

​​HTML Image Maps

​​Make Your Image Map Responsive

HTML Image Maps

Make Your Image Map Responsive