Home / code / html

Image mapping.

With image mapping you can add different links in 1 image. Just select an area and add the link.

First you need to add the image and say which image map to use.
<IMG SRC="url" USEMAP="#mapname">

Then you define the image map.
<MAP NAME="mapname"></MAP>

Now you can add the area element.
<AREA SHAPE="rect|poly|circle" COORDS="?" HREF="url"|NOHREF>

The attribute SHAPE
This gives the shape of the clickable area.

The attribute COORDS
Here you give the coordinates.

  • RECT : x upperleft, y upperleft, x rightunder, y rightunder
  • POLY : x1,y1,x2,y2, ... ,xn,yn
  • CIRCLE : x center, y center, radius

The attribute HREF
The URL of the link.

The attribute NOHREF
If the area is NOT clickable


You can do this all by hand, but you don't have to.
There are some cool programs that you can use.

  • Map This! Windows
  • MapEdit Windows
  • Webmap Mac



Latest script: