Search this site...

Creating a rectangular hotspot

To define a rectangular hotspot, you have to define two points: the upper-left corner and the lower-right corner. For the following image,

Rectangular hotspot coordinates
Figure 1 - showing the image starts at coordinates (0, 0), the upper-left corner at coordinates (6, 4), and the lower-right corner at coordinates (93, 38).

Learn to script HTML

the upper-left corner coordinates are (6, 4) and the lower-right corner coordinates are (93, 38). The coordinates (6, 4) refer to a point on the image that is 6 pixels to the right and 4 pixels down from the top of the image. The coordinates (93, 38) refer to a point on the image that is 93 pixels to the right and 38 pixels down from the top of the image. Figure 1 shows where the image starts (coordinates (0, 0)), the upper-left corner of the hotspot (coordinates (6, 4)), the lower-right corner of the hotspot (coordinates (93, 38)).

The following shows the HTML code to create the rectangular hotspot:

<map name="ScriptHTML">
<area shape="rect" coords="6,4,93,38" href="HTML-introduction.asp">
</map>

Finally, to add the image map to our web page, we need to use the ScriptHTML image map we defined above. To use an image map, simply add the usemap attribute to the image map graphic. For instance,

<img src="http://www.scriptingmaster/images/html/script-html.GIF" usemap="#ScriptHTML" alt="Learn to script HTML">

Remember to use the pound sign (#) before the image map name. The following shows the output:

Learn to script HTML