In this tutorial, I will take you through the usage of html image maps with best examples.
HTML Image Maps
What is Image Mapping?
Image Map is a list of coordinates relating to a specific Image that allows users to access different web pages by clicking on different areas of an Image.
Client side Image Mapping
There are two types of Image Maps – Client Side Image Maps and Server side Image Maps. Here we are learning how to a Client Side Image Maps by using HTML. With a client side Image Map, you can specify a list of areas that will be used as the links.
The < map > tag is used to define a client-side Image Map. Inside this tag, you will specify where the clickable areas are with the HTML < area > tag.
<map name="nextmap"> <area shape="rect" coords="148,5,262,36" href="hello.html"> </map>
There are three shapes commonly used in Image Maps , they are :
RECT (left, top, right, bottom)
CIRCLE (center-x, center-y, radius)
POLY (x1, y1, x2, y2, .,.)
How to find the Image Co-ordinates ?
You can easily find the co-ordinates of an image by insert it into an image editor such as Paintbrush, and move the mouse around your desired area , so that you can find its co-ordinates .
Also Read: Learn HTML Tables
References: More on HTML Image Maps