ADD CLICKABLE AREAS TO IMAGE
<map name="mymap">
<area title="Code Boxx" href="https://code-boxx.com" coords="219,36,383,199" shape="rect">
<area title="Wikipedia" href="https://wikipedia.org" coords="416,405,67" shape="circle">
</map>
<img src="MY-IMAGE.JPG" title="Image Title" usemap="#mymap">
- Create an image map with
<map>, and give it a name="MYMAP".
- Set
usemap="MYMAP" on the image.
- Finally, define clickable areas in the image using
<area>.
title The title or caption of the area.href Link to this URL.shape Shape of the area. Can be rect, circle, poly.coords The exact area on the image.
USE AN ONLINE IMAGE MAP GENERATOR
- It’s a pain to trial-and-error exact coordinates on the image.
- Just do an online search for “image map generator” and use any free tools.
- Copy-paste the area coordinates – The end.
