Pro aktivování částí obrázku jako odkazů vytváříme na obrázku mapu. Každá její část odkazuje na námi zvolený cíl. Definujeme ji takto:
<MAP NAME="mojemapa">
...
</MAP>
Jednotlivé oblasti mapy se definují za pomocí tagu <area>, který má několik atributů:
<img src="/planety.gif" width="145" height="126" alt="Planety" usemap="#planetymapa">
<map name="planetymapa">
<area shape="rect" coords="0,0,82,126" href="/slunce.htm" alt="Slunce">
<area shape="circle" coords="90,58,3" href="/merkur.htm" alt="Merkur">
<area shape="circle" coords="124,58,8" href="/venuse.htm" alt="Venuše">
</map>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head><!-- ščřžýŠČŘŽÝ -->
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<map name="mapa">
<area href="http://www.seznam.cz" shape="rect" coords="17,18,136,60">
<area href="http://www.google.com/" shape="rect" coords="142,25,263,60">
<area href="http://www.centrum.cz/" shape="rect" coords="21,84,152,133">
<area href="http://www.yahoo.com" shape="rect" coords="138,84,254,178">
</map>
<img src="/mapa.png" usemap="#mapa" border="0">
</body>
</html>