Back

Using Imagemap Points


The following image is a clickable imagemap. There are 19 points defined. View map

A user does not have to click on top of any particular point. Whenever the pointer moves over the image, the pointer's position is tracked by the browser.

Whichever point on the imagemap is nearest the position of the pointer, that point is becomes the active defined point. When a user then clicks with his mouse, the browser then loads the page which is assigned to that active point.

The sample code below, shows the standard source code for a points style imagemap. Only one of the 19 defined areas is shown in the code, in order to save space.

<img src="tx_point.GIF" border="0" usemap=#cities>
<map name="cities">
<area shape="point" coords="226,183" HREF="http://howdyyall.com/texas/Rollptex.htm#SANANGELO">
</map>

Top
The img src="tx_point.GIF" places an image onto the webpage. The border="0" is used to supresses the border around the image which appears when the image is used as a hyperlink. The usemap=#cities notifies the browser that this image is tied to a map definition. Notice the preceding # before the name. Because the map definition is contained within this page, quotes are not used. Quotations at this point would cause the browser to look to another file for the map definition.

The map name="cities" establishes a map defintion with the name "cities". The particular map name can be almost anything, so long as the image and the map use the same name.
area is the standard tag used to define any area shape within an map definition. Each area must declare its shape for proper processing by the browser. In this example we use 19 points. The coords="226,183" pinpoint in pixels, the x,y location of a point where x is the distance from the left and y is the distance from the top, in pixels.

HREF="http:// ... " declares the page that will load when the user clicks near the active point. This page can be at another site (as in the example), another page at the current site (HREF="pagetwo.htm"), or a defined anchor within the current page (HREF=#section02), although it is rare that point would be used for navigation within the same page. Points are normally used to navigate through geographic based web sites.

One last note. Within the HTML source code, the map definition is normally listed immediately following the image which requires it. This close proximity is not required. Within this page for example, the map definition source code follows the horizontal line entry below. Having the map definition at the bottom of the page, away from the rest of the source code, keeps it in tact and out-of-the-way, while the rest of the page is being cut, pasted, formatted, and debugged.


Back