Detailed explanation on the use of tag in html

1, area tag: It is used to divide the active area in the image map . Through this tag, the active area (also called a hotspot) can be set in the image map, so that when the user moves the mouse When the specified action area is clicked, it will automatically link to the preset page for positioning.
2, area> tag: the area it divides must be within the area of ​​the image map, so before using the mark to divide the area, you must use another HTML mark

The basic syntax structure is as follows:

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

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>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。

mark divides the action area in the image map, so the divided action area must be within the area of ​​the image map, so use the mark to divide Another HTML tag

The following is an example to illustrate the usage of these two tags:

Here is a picture of a new bookshelf. The effect is: when the mouse clicks " When clicking the book "Website Design Guide", a new window will be opened to display the Introduction and order webpage (urlall.htm) about the book; when the mouse clicks on the book "Website Design Guide", a new window will be opened. Open a window to display the introduction of this book and the web page for orders (siteall.htm); when the mouse clicks on the book "Web Page Skills Collection", a new window will be opened to display the introduction to this book and the web page for orders. (pagejqlall.htm). Production method:

Insert the image, set the relevant parameters of the image, and set the parameter usemap="newbook" ismap in the tag to represent the reference to the image map (newbook) ;

Use the

Use to mark the locations of the three books respectively. Divide three rectangular areas and set their link parameter href.

1    <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">     
2    <map name="newbook">     
3    <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">     
4    <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">     
5    <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">     
6    </map>

Several points that should be paid attention to when creating the effects introduced in this article:

Don’t forget to set the usemap and ismap parameters in the tag, and the parameter value of usemap must be the same as

All hotspot areas in the same "image map" must be within the scope of the image map, that is, all< The area> tags must be between ;

The coordinate format set by the cords parameter in the tag must be consistent with the shape of the area set by the shape parameter. Matching is required to avoid the phenomenon that the rectangular area set by the shape parameter is the vertex coordinate of the polygon area set in the cords.

The above is the detailed content of Detailed explanation on the use of tag in html. For more information, please follow other related articles on the PHP Chinese website!