Tutorials > HTML > Image Maps
Learn how to create clickable regions in an image.
Image maps create clickable regions in an image. This is very helpful for a navigation bar. This method is an alternative to slicing up the image into many parts. If you don't want to use Javascript in order to have image rollovers, then image maps is the best route to go.
Place the following somewhere in the body of the page:
<map name="testmap"><area coords="50,71,113,79" href="link1.html">
<area coords="30,108,69,118" href="link2.html">
<area shape="circle" coords="127,131,24" href="link3.html" target="_blank">
<area shape="poly" coords="17,14, 63,10, 65,30, 16,30" href="link4.html">
</map>
All of the area tags have the following three attributes:
shape- defines the shape of the clickable region. There are three shape choices, "rect" (rectangular), "circle" (circular), and "poly" (polygonal). Rectangular is the default, so its not neccessary to use.
coords- defines the coordinate points of the region. These x,y points can be found using Photoshop. (Open up the image and use the Info Palette.) For rectangles, give the x,y coordinate for the top left and bottom right corners. For circles, give the x,y coordinates of the center followed by the radius in pixels. (You can find the radius by using the measure tool in Photoshop.) For a polygon, give the x,y coordinates for each or the four corners.
href- defines what page will appear when the region is clicked. You can also define what window the link will open up in by adding "target="_blank", or any other target attribute.
Now all you need to do is tell the image to use the map.
<img src="images/imagemap.gif" width="164" height="155" alt="testmap" border="0" usemap="#testmap">
Here is an example using the code above:
