The <area> tag is mainly used for image maps. Through this tag, the active area (also known as hot spots) can be set in the image map. This way, when the user's mouse moves to the specified active area and clicks, it will automatically link to the pre-set page. Its basic syntax structure is as follows:
<area class=type id=Value href=url alt=text shape=area-shape cools=value>
class and id: are the types and id numbers that specify the hotspot respectively.
alt: Alternative text used to set hotspots.
href: Used to set the URL address to which the hotspot is linked.
shape and coords: are two main parameters, which are used to set the shape and size of the hotspot. The basic usage is as follows:
<area shape=rect coordinates=x1, y1,x2,y2 href=url> means that the set hotspot is a rectangle, the vertex coordinates of the upper left corner are (X1,y1), and the vertex coordinates of the lower right corner are (X2,y2).
<area shape=circle coordinates=x1, y1,r href=url> means that the shape of the set hotspot is circle, the center coordinate is (X1,y1), and the radius is r.
<area shape=poligon coordinates=x1, y1,x2,y2 ...... href=url> means that the shape of the set hotspot is a polygon, and the coordinates of each vertex are (X1,y1), (X2,y2), (x3,y3) .......
Note: The positions of these points x1, y1, x2, y2 are determined based on the picture, not the size of the window.
The <area> tag divides the acting area in the image map, so the divided acting area must be within the area of the image map. Therefore, before dividing the area with the <area> tag, you must use another HTML tag <map> to set the acting area of the image map and set the name for the specified image map. The usage of this tag is very simple, that is, <map name=image map name> ...... </map>.
The following is an example to illustrate the usage of these two markers:
Here is a picture of a new bookshelves. The effect is: when clicking on the book, a new window is opened to display the introduction and order page of the book (urlall.htm); when clicking on the website design strategy book, a new window is opened to display the introduction and order page of the book (siteall.htm); when clicking on the book, a new window is opened to display the introduction and order page of the book (pagejqlall.htm). How to make:
1. Insert the picture, set the relevant parameters of the image, and set the parameter usemap=newbook ismap in the <img> tag to represent a reference to the image map (newbook);
2. Use <map> to set the area of action of the image map and name it: newbook;
3. Use <area> marks to divide three rectangular action areas based on the positions of the three books, and set their link parameters href.
Completed production, the source code of this example is as follows:
Copy the code