CoderTools Web site

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
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

12/14/2017 1:07:11 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP