One day, after discussing coordinate geometry with my class, a student asked me about the application of coordinate geometry in HTML. She said she was having trouble finding the coordinates of a link in a clickable picture—the mouse pointer just wouldn’t turn into a hand! So I advised her to right-click the page and find that picture or image if there is a <map> tag in the HTML code.
The following day I gave her a sample on how to create an image map. I am reprinting it here with some modification.
What is an image map?
An image-map is an image with clickable areas. For example, in the image at the right, the head, the left shoulder, and the left fingers are clickable areas. These areas are called hotspots and acts as a hypertext link. Any time the user clicks on a hotspot, the hypertext link is activated. These links could activate an html file, mp3, video file, text file, or any other files.Let’s create an image-map of the image at the right.
The syntax for a hotspot
The shape of a hotspot could be in the form of a rectangle, circle, or polygon. This hotspot’s area is defined by the <area> tag.
The syntax for a rectangular hotspot is:
<area shape="rect" coords="x1, y1, x2, y2" alt="text" href="URL" target="value" />
where x1 and y1 are the coordinates of the upper-left corner of the rectangle and x2 and y2 are the coordinates of the lower-right corner.
The syntax for a circular hotspot is:
<area shape="circle" coords="xc, yc, radius" alt="text" href="URL" target="value" />
where xc and yc is the center of the circle and radius is the radius of the circle.
The syntax for a polygonal hotspot is:
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, . . ., xn, yn" alt="text" href="URL" target="value"/>
where x1, y1, x2, y2, x3, y3, xn, and yn are the coordinates of the vertices of the polygon.
The area element is always nested inside a <map> tag.
If the shape attribute has a value equal to default , the entire region of the image becomes the hotspot.
The value of the coordinates are in pixels and if the area has no associated link then use the nohref attribute instead of href.
Take note that the target attribute is optional.
Step 1: Define an image-map hotspots in the image
To determine the coordinates of a particular point in an image-map, open the image in Windows’ Paint. The coordinates can be obtained from the right portion of Paint’s status bar. Another way to determine the coordinates is b
y opening the image in an image editor like GIMP.With the image example at the right, the coordinates for the rectangles as determined from GIMP are:
x1 = 25, y1 = 0, x2 = 60, y2 = 30
For the circle:
xc = 23, yc = 50
For the polygon:
x1 = 58, y1 = 35, x2 = 80, y2 = 45, x3 = 65, y3 = 60, x4 = 68, y4 = 55
Step 2: Plug in all the values in the HTML code
Plug in all the values in the HTML code and assume a radius of 7 pixels in the circular hotspot.
Make sure that the <area> tags are nested inside a <map> tag and the <img> tag is written before the <map> opening tag.
<html>
<body>
<img src="myimage.jpg" width="94" height="93" alt="myimage" usemap="#mybody" />
<map name="mybody">
<area shape="rect" coords="25, 0, 60, 30" alt="head" href="http://cnn.com/" target="_blank"/>
<area shape="circle" coords="23, 50, 7" alt="hand" href="http://en.wikipedia.org/wiki/Hands" target="_blank" />
<area shape="poly" coords="55, 35, 80, 45, 85, 60, 65, 55" alt="shoulder"
href="http://i17.photobucket.com/albums/b58/kittymimi90/lovely/12-EdgeandRydiaFinalFantasyIV.jpg" target="_blank" />
</map>
</body>
</html>
