Last update : June 24, 2014
You can create different clickable areas within an image using the usemap attribute together with the map tag. The usemap attribute of the img tag points to an map tag containing a description of the clickable areas that the map is divided into. The map tag has a id attribute to define its name, and also declares which areas are clickable by using the area tags.
An example of HTML code is shown below :
<img src="image.jpg"
width="150"
height="70"
usemap="#mymap">
<map id="mymap">
<area shape="rect"
href="start.html"
coords="0,0,48,28"
alt="blablabla" />
<area shape="circle"
href="previous.html"
coords="50,30,10"
alt="blablabla" />
<area shape="poly"
href="next.html"
coords="60,50,80,30,100,40,50,100"
alt="blablabla" />
</map>
The coordinates for the different shapes are :
- rect (rectangle) : top left x, y ; bottom right x, y
- circle : center x, y ; radius
- poly (polygon) : list of x, y coordinates, separated by commas
In XHTML 1.0, the “usemap” attribute in the “img” element is defined as being a URI. This means that # (pound sign) can be used, as it specifies a link to a ‘fragment identifier’ in the current page. For the “map” element, the “id” attribute is required. In XHTML 1.1, the “usemap” attribute for the “map” element is an IDREF rather than a URI. This means that this value must be the same value as the “id” attribute of the other element.
The problem is that the valid code does’nt work in all browsers. If you want an image map that functions, you must write invalid XHTML 1.1 code. More infos about this topic are available at the Randsco website.
The name tag is required besides the id tag for the Firefox and Chrome browser’s. To embed a usemap in another HTML page, the object tag returns a wrong URL with embedded links. A workaround is to use iframes which work in most browsers.
ISMAP is part of the old-fashioned way of making image maps which originally required a server-side file as well as the HTML in the page.
We can add events (that can call a javascript) to the tags inside the image map. The tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.
A code example is shown hereafter :
<area shape =”circle” coords =”90,58,3″
onMouseOver=”writeText(‘The mouse is inside the circle.’)”
href =”about.html” target =”_blank” alt=”Blablabla” />
A useful program to set up image maps is Mapedit 4.0 5 from Boutell.com.
