HTML Image Maps
Creating Clickable Image Areas
An image map is one image with multiple clickable areas. You can easily create clickable images by placing them in an anchor tag (<a>). You can also create an image map where clicking on a specific part of an image redirects you to another page. A typical example would be an image of the world, you could have different links for different continents.
In order to create an image map you need to use an outer <map> tag, one or many subtags of map called <area> and an image tag for the image!
Examples for <map>
The first tag to know when using image maps is the <map> tag.
The example shows two frames seperated by a horizontal splitter. The first frame has a height of 200px and the second frame has the remaining height of the window (*).
<img src="" usemap="#name1"/>
<map name="name1" id="name1">
<area href="html_index.aspx" shape="rect" coords="" />
<area href="html_frames.aspx" shape="circle" coords="" />
<area href="html_frames.aspx" shape="poly" coords="" />
</map>Give it a go!
Attributes for <map>
||The id of the image map, the value is typically used in the usemap attribute of the image tag.
||(Deprecated)The name of the image map, the value is typically used in the usemap attribute of the image tag
Attributes for <area>
|shape and coords attributes are linked. Depending on the value of shape the coords attribute takes different values
||shape="rect" coords="left, top, right, bottom"
shape="circ" coords="centerx, centery, radius"
shape="poly" coords="x1, y1, x2, y2, ,xn,yn"
|the values accepted by coords depends on the shape attribute (the shape of the hotspot). All values are in pixels and comma separated.
if shape is poly then the coordinates are x and y for each point of the polygon. The coords must specified in order.
||The link of the hotspot/area. When the user clicks on the hotspot the url in href will be opened in the browser window.
||the name of the target browser window to open up the link specified in the href attribute. if _blank then will open up a new browser window.
||a description of the hotspot or link. When the mouse hovers over a hotspot a tooltip will appear with the text from the alt attribute