image map

<img src="" usemap="#"><map name=""><area>

Browser
Internet Explorer Firefox Opera

The MAP element defines a client-side image map, and the AREA element is used to define an area inside the image map.

Example Blue Pink Yellow

<img src="image/map.gif" alt="Example" usemap="#maptest">

<map name="maptest">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue">
<area shape="circle" coords="184,86,30" href="map2.html" alt="Pink">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="Yellow">
</map>

Elements and Attributes

The IMG element

<img src="image/map.gif" alt="Example" usemap="#maptest">

Attribute Value Explanation
src=" " URL the URL of the image to display
alt=" " text alternate text (short description)
usemap=" " #map name a number sign (#) and the map name (arbitrary name)
  • The alt attribute must be specified for the IMG element.
  • If you want to rid the image of the border, specify 0 for the value of the border attribute.
    <img src="image/map.gif" alt="Example" usemap="#maptest" border="0">

The MAP element

<map name="maptest"> - </map>

Attribute Value Explanation
name=" " map name the name defined by the usemap attribute

The AREA element

<area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue">

Attribute Value Explanation
shape=" " the shape of the hot spot
rect rectangle
circle circle
poly polygon
coords=" " the coordinates of the hot spot
pixels for rect : the top-left and bottom-right coordinates
pixels for circle : the center coordinate and radius size
pixels for poly : the coordinates of all corners
href=" " URL the target URL of the link
alt=" " text alternate text (short description)
  • The alt attribute must be specified for the AREA element.
  • The target attribute can be used with the AREA element.
    <area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue" target="_blank">

Specifying coordinates

Coordinates example Image map example

rect (rectangle) : The top-left and bottom-right coordinates.
coords="22,11,122,62"

circle : The center coordinate and radius size.
coords="184,86,30"

poly (polygon) : The coordinates of all corners.
coords="87,78,30,110,81,139,69,113"
or
coords="87,78,30,110,81,139,69,113,87,78"

Coordinates calculating

Example that uses "Windows Paint".

Coordinates example

Example

<p><img src="image/map.gif" alt="Example" border="0" width="221" height="145" usemap="#test"></p>

<map name="test">
<area shape="rect" coords="22,11,122,62" href="map1.html" alt="Blue">
<area shape="circle" coords="184,86,30" href="map2.html" alt="Pink">
<area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="Yellow">
</map>
Output

Example

Blue Pink Yellow