There are two types of image maps possible in HTML: a/ client side image maps, b/ server side image maps.
Client side image maps use the "usemap" attribute of <img> tag and is defined by <map> and <area> tags.
The "usemap" attribute is used to identify the name of the map along with # tag. And the <map> tag indicates various areas defined within an image. The <area> tag is used to define an area within an image and it can take one of the following three shapes:
Rectangle is defined with the shape attribute "rect" and accepts the coordinates in the format "x1,y1,x2,y2" where (x1,y1) are the upper left corner of the rectangle and (x2,y2) are the lower right corner of the rectangle.
Circle is defined with the shape attribute "circle" and accepts the coordinates in the format "x1,y1,r1" whereas (x1,y1) is the center of the circle and r1 is the radius of the circle.
Polygon is defined with the shape attribute "poly" and accepts the coordinates in the format "x1,y1,x2,y2,….,xn,yn" where (x1,y1) indicates the first point of the polygon and (xn,yn) is the last point of the polygon.
Server side image maps use "ismap" attribute of the <img> tag to inform the server about the document to be delivered when a user clicks on the particular coordinates of the image. The coordinate starts with the upper left corner of the image with (0,0) and a question mark is added with the URL. For example, if you want to create a link when a user clicks on the coordinates (40,40) on the image, the following code can be used:
This will trigger a request /apps/search?q=html?40,40 to the server and the configuration needs to be done at server side to process this script and deliver the required document.
There are three HTML elements used to create image maps:
1/ img: specifies the location of the image to be included in the map; 2/ map: is used to create the map of clickable areas; 3/ area: is used within the map element to define the clickable areas.
Step 1: determine the size of the image.
We use HTML to cause the image to display the following size: 500 by 332 pixels. Also, when you create an image map it's important to remember that if you change the size of the image you will also have to change the area coordinates. This is because the area coordinates are tied to the original size and scale of the image.
Step 2: create a map to overlay the image.
The map code looks like this:<map name="map_example"> </map>. It's important to assign a name to the map, as the name is used to overlay the map on the image. The "usemap" attribute id followed by the name of the map. This is how the map is tied to the image.The clickable areas will need to be defined between the opening and closing map tags.
Step 3: define the coordinates for the map shapes.
Taking the example here below as reference, two shapes need to be created to overlay over the image: a polygon shape over the screen of the phone, and a second polygon that approximately covers the Scrabble letters. The shape or area of the phone screen can be created in an HTML map by using the following code:<area href="https://facebook.com" alt="Facebook" target="_blank" shape=poly coords="30,100, 140,50, 290,220, 180,280">. Microsoft Paint with the rulers visible, we can see that the four corners of the phone screen fall at the following pixel coordinates: top left: 30 by 100 pixels; top right: 140 by 50 pixels; bottom right: 290 by 220 pixels; bottom left: 180 by 280 pixels. Using the same process described here above, the shape over the letters can be created by by using the following code: <area href="https://en.wikipedia.org/wiki/Social_media" target="_blank" alt="Wikipedia Social Media Article" shape=poly coords="190,75, 200,60, 495,60, 495,165, 275,165">.Notice that since the shape over the Scrabble images has five corners there are five sets of dimensions in the code.
Step 4: put it all together: we can combine the image, map, and shapes into a single block of code that looks like this: see example 1.
