On the previous page we learned how to make a basic, rectangular image map. But suppose we want to create an odd-shaped clickable area, such as the outline of a non-rectangular building?
Remember we said that the clickable area of an image map is defined by a series of x,y coordinates,
and that 
rectangular or square areas only need the upper left-hand and lower right-hand corners defined? Well....
to define an irregularly-shaped clickable area, each point along the perimeter where the direction of the outline
changes. In this tutorial we will show you how to create a clickable image map of this star:
For this example, the "hot spot" is at any point within the perimeter of the star.
As before, the picture of the star (the one above, without the coordinates) is a map, so you can move your cursor over the image to see the coordinates.
Remember that, in a set of coordinates, the first number refers to the horizontal offset - that is, the distance, in pixels, from the left-hand edge of the image - and the second number refers to the vertical offset - the distance, in pixels, from the top of the image. Okay...we have a confession to make here: if you haven't already figured it out, the coordinates shown on the second image will not result in a star-shaped map, but a penatgonal map - because the coordinates we show are for the points of the star and do not include the points at which the five arms of the star meet. Why did we do this? To illiustrate our statement that oddly-shaped image maps require a set of coordinates to be defined at every point at which the direction of the outline of the area changes.
Here is the image with all the necessary coordinates to make a star-shaped image map.
In the sample below, you will see the code for the star-shaped image map. Note that the line may be broken up in any way
desired - for example, to line up all the coordinates so they're more easily read.
|
<MAP NAME="mapname"> <AREA SHAPE=POLY HREF="URL" COORDS="x1,y1 x2,y2 ... x10,y10"> </MAP> |
Now, that wasn't too difficult, was it? We didn't think so. Have fun!
clickable Image Maps...!
we'll see...
Back to Navpooh's Home Port
Back to HTML tutorial index