Introduction to the use of html area image hotspots with a list of related properties

The <area> tag is mainly used in image maps. It can be used to set an active area (also called a hotspot) in an image map. When the user moves the mouse to the specified active area and clicks it, it will automatically link to a pre-set page. Its basic grammatical structure is as follows:

<area class=type id=Value href=url alt=text shape=area-shape columns=value>

class and id: specify the type and id number of the hotspot respectively.

alt: Alternative text used to set the hotspot.

href: used to set the URL address to which the hotspot is linked.

Shape and coords: are the two main parameters used to set the shape and size of the hotspot. Its basic usage is as follows:

<area shape="rect" coords="x1, y1,x2,y2" href=url> means setting the shape of the hotspot to a rectangle, with the coordinates of the upper left corner vertex as (X1, y1) and the coordinates of the lower right corner vertex as (X2, y2).

<area shape="circle" coords="x1, y1,r" href=url> means setting the shape of the hotspot to a circle, with the center coordinates (X1, y1) and the radius r.

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url> means that the shape of the hotspot is set to a polygon, and the coordinates of each vertex are (X1, y1), (X2, y2), (x3, y3) ...... in sequence.

Note: The positions of the points x1, y1, x2, y2 are determined by the image, not the size of the window.

The <area> tag is used to divide the effective area in the image map, so the divided effective area must be within the area of ​​the image map. Therefore, before using the <area> tag to divide the area, you must use another HTML tag <map> to set the effective area of ​​the image map and set a name for the specified image map. The usage of this tag is very simple, that is, <map name="image map name">... </map>.

The following example illustrates the usage of these two tags:

Here is a picture of a new bookshelf. The desired effect is: when the mouse clicks on the book "URL Directory", a new window will open, displaying the book's introduction and order webpage (urlall.htm); when the mouse clicks on the book "Website Design Guide", a new window will open, displaying the book's introduction and order webpage (siteall.htm); when the mouse clicks on the book "Web Page Skills Encyclopedia", a new window will open, displaying the book's introduction and order webpage (pagejqlall.htm). Preparation method:

1. Insert the image and set the relevant parameters of the image. In the <img> tag, set the parameter usemap="newbook" ismap to indicate the reference to the image map (newbook);

2. Use the <map> tag to set the image map's area of ​​effect and name it: newbook;

3. Use the <area> tag to divide the three books into three rectangular areas, and set their link parameters href.

The production is completed. The source code of this example is as follows:

Optional attributes

Core Attributes

The <area> tag supports the following core attributes:

More information about core properties.

Event attributes

The <area> tag supports the following event attributes: