Image Map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.
In HTML, an imagemap is made of the actual image that is embedded with the <img> tag, and contains a usemap attribute.
The imagemap is comprised of the <map> tag and <area> tags, which defines the fields within the weblinks. These are similar to the <a> tag, defining which URL should be opened.
Example:
<img src="image.png" alt="alternative text" usemap="#mapname" />
<map name="mapname">
<area shape="rect" coords="9,372,66,397" href="http://example.com/" />
</map>
Let's imagine that circle.png is a 400x400 px transparent background image with a circle in the middle.
What I've got now is that the entire image area (400x400px) is clickable. What I would like…
