Clickable Image Maps
Image maps are images with clickable links. In an image map, different areas of a single image are mapped or linked to different urls.
An image map is defined with the <map> element and then it is linked with the image by usemap image attribute.
Map shapes
Basically when we create an image map, we mark different areas on the image to assign them a url.
We can use three geometrical shapes to mark the image. Those are,
- Rectangle
- Circle
- Polygon
Each shape uses a slightly different method to draw the map.
Finding the image coordinates
To draw a geometrical shape map on the image, you need to know the coordinates of the image.
Coordinates are values of x and y (horizontal and vertical) pixels that specify each point on the image.
You can find the image coordinates at a point by openning the image in an image editing software like Photoshop or MsPaint. Move you mouse pointer over a point and the software will tell you its coordinates.
Creating the map
The image map can be placed anywhere is the document.
To create a map,
1. Start the map by typing <map name="map-name" id="map-name"> tag.
The name and id attributes are used to give map a name.
Here map-name is the name of the map.
2. Now we have to define a click able area. Type <area
3. Type alt="text". This will show the alternate text.
4. Now we have to select a shape. Type shape="circle" for circle or shape="rect" for rectangle or shape="poly" for a polygon.
5. Now we have to define the dimesions or size of the shape we selected by using its coordinates.
(a) For rectangle, type coords="x1, y1, x2, y2". Here x1, y1 represents upper-left corners and x2, y2 represent lower-right corners of the rectangle.
(b) For circle, type coords="x, y, r" . Here x and y represent the center of the circle and r is its radius.
(c) For polygon you have to spcecify all its corners. Therefore type, coords="x1, y1, x2, y2,x3,y3". Here x1,y1 or the coordinates of the first corner, x2,y2 are the coordinates of the second and so on.
There will be as many sets of x and y coordinates as many corners the polygon have. For exmaple, if its a 5 corner polygon then there will be coordinates from x1,y1 to x5,y5.
6. Type href="url". Here url is the page that will open when this area will be clicked on the map.
If you don't want to assign a link to this area, just type href="nohref" instead.
7. Specify an openning target for the new page by using target attribute if you want.
8. Close the area tag by typing />.
9. To create more click able areas, repeat steps 2 to 8 for each area.
10. End the map by typing </map> tag.
The clickable image map has now been defined.
Linking the Map with the Image
Now this is the easy part. In the image you want to use with the map just add the attribute usemap="#map-name". Here map-name is the map's name defined in the <map> tag.
Example
Here is the image i used with my map.
The coordinates for the shapes are,
Rectange: Upper left=19,37 and Lower right=94,93
Circle: Center=147,64 and Radius=38
Polygon(Triangle): Lower left corner=192,97 ,Upper corner=232,31 and Lower right corner=271,96
The map is
<map name="example-map" id="example-map">
<area alt="Rectangle" shape="rect" coords="19,37,94,94" href="http://www.tomakewebsite.com" />
<area alt="Circle" shape="circle" coords="147,64,38" href="http://www.tomakewebsite.com" />
<area alt="Polygon" shape="Poly" coords="192,97,232,31,271,96" href="http://www.tomakewebsite.com" />
</map>
Map is linked to image as
<img src="../images/click-able-image-map.gif" usemap="#example-map" alt="Clickable image map"/>
You can check that now the image has click able links by moving your mouse over the image.
Related:
Link to this page :
Copy and paste the following code in an html document to link to this page,