Imagemaps
If you want to find the exact coordinates of a point on an image, simply open the image in Paint Shop Pro. Now by hovering the mouse pointer over the image, the coordinates of the point appear on the bottom left of your screen. The coordinate (54, 290) would mean that the point is located 54 pixels from the left of the image and 290 pixels from the top. It will become clear soon why you need to know this.
The details of an imagemap are kept separate from the image and are contained between the <map> and </map> tags. You must specify a name for each map you create...
<map name="imagemap1">
You then must specify the different hot-spots using the <area> standalone tag (standalone means that it has no end tag).
You can specify the area as a rectangle, a polygon or a circle. For each or these you must specify a different set of coordinates.
RECTANGLE: top-left corner & bottom right corner
POLYGON: every corner
CIRCLE: centre coordinates and radius
The "shape" attribute is used to specify what shape you want to use and the "coords" attribute is used specify the coordinates.
You must also specify the page that you want this hotspot to link to and for this you use the "href" attribute.
Imagine you want to specify a rectangular hotspot. You have checked in Paint Shop Pro and the top left corner of the rectangle has the coordinates (10, 20), the bottom right corner of the rectangle has the coordinates (50, 70). You want this rectangle to link to "images.html"...
<area shape="rect" coords="10,20,50,70" href="images.html">
Now imagine you want to specify a circular hotspot. My using PSP you have concluded that the centre lies at (80, 70) and the radius of the circle is 20 pixels. This time we will link to "videos.html"...
<area shape="circle" coords="80,70,20" href="videos.html">
Finally imagine we want an irregular shaped hotspot with four corners at (60, 30), (70, 20), (80, 100) & (55, 110). We will link this to "songs.html".
<area shape="poly" coords="60,30,70,20,80,100,55,110" href="songs.html">
Although in practice the above combined code will have many overlapping areas, the final image for such an imagemap would be...
<map name="imagemap1">
<area shape="rect" coords="10,20,50,70" href="images.html">
<area shape="circle" coords="80,70,20" href="videos.html">
<area shape="poly" coords="60,30,70,20,80,100,55,110" href="songs.html">
</map>
To use this imagemap on an image you would use the "usemap" attribute...
<img src="map.gif" usemap=#imagemap1 border=0>
I have set "border=0" so as the annoying border, like that with a link, does not appear around the image.
I have created an image for you to practice on. Right
Latest Articles