Welcome In HTML Course:-
Back To Advanced index

Usually, when you use a picture for a link, you simply but your <img> tag (image tag) inside your <a> tag (link tag). However, you can define links on an image a different way, called imagemaps. In imagemaps, clicking on different parts of an image will activate different links. There are two types of imagemaps, client-side and server-side. We will concentrate mostly on client-side maps which are usually used today, and are supported on Netscape 2.0 and Internet Explorer 3.0 and later.

Imagemaps can be tedious if you are working with complicated shapes for links on an image. Imagemaps use a "map" that is put over an image. This "map" needs to have areas defined by using rectangles, polygons, and circles. You need to make a map in your HTML file by using the <map>...</map> tag. Example:

<map name="mapname"> <!--put coordinates and links here--></map>

Between these two map tags, you need to use another tag, the <area>...</area> tag. The coordinate system for this tag starts at the upper left pixel of the image. There are three main types of <area> tags, they are all listed and explained below:

<area shape="rect" coords="x1,y1,x2,y2" href="url">

This will make a rectangle using points x1,y1 as the upper left corner and points x2,y2 as the lower right corner. "href" sets to what page the user will be taken to, just as the <a> tag does.

<area shape="circle" coords="x,y,radius" href="url>

In this tag, x,y is the coordinates of the center of the circle and 'radius' is the radius of the circle.

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xN, yN" href="url">

With the polygon tag you can make a polygon with as many sides as you want. This can be very helpful with complicated, but tedious to set up.

Here is an example of an image map that uses a circle, polygon, and rectangle:
 

To tell the browser what image to put the map onto, you need to have define which image you want the imagemap on. You can do this by using the usemap attribute of the <img> tag. <img src="image.gif" usemap="#mapname">

Here is the HTML code for the imagemap above:

<IMG SRC="imagemap.gif" USEMAP="#map" WIDTH=175 HEIGHT=75 BORDER=0>
<MAP NAME="map">
<AREA SHAPE=CIRCLE COORDS="26,26,22" HREF="1.html">
<AREA SHAPE=POLY COORDS="62,32,41,64,93,64" HREF="2.html">
<AREA SHAPE=RECT COORDS="114,32,171,70" HREF="3.html">
</MAP>

There are free utilities that make building imagemaps easier like Dreamweaver Or Microsoft FrontPage .

Back To Advanced index