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>

Name	Values	Description
id	text	The id of the image map, the value is typically used in the usemap attribute of the image tag.
name	text	(Deprecated)The name of the image map, the value is typically used in the usemap attribute of the image tag

Attributes for <area>

Name	Values	Description
shape	rect circle poly default	shape and coords attributes are linked. Depending on the value of shape the coords attribute takes different values
coords	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.
href	url	The link of the hotspot/area. When the user clicks on the hotspot the url in href will be opened in the browser window.
target	text	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.
alt	text	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