The < area > tag is mainly used for image map, through which the active area (also known as hotspot) can be set in the image map, so that when the user’s mouse moves to the specified action area and clicks, it will automatically link to the preset page. Its basic grammatical structure is as follows:
<area class=type id＝Value href＝url alt＝text shape＝area-shape coods＝value>
Class and ID: specify the type and ID number of the hotspot respectively.
ALT: alternative text for setting hotspots.
It is used to set the URL address of the hotspot.
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 = “record” coords = “x1, Y1, X2, Y2” ref = URL > indicates that the shape of the hotspot is rectangular, the coordinates of the top left corner vertex and the lower right corner vertex are (x1, Y1) and (X2, Y2).
< area shape = “circle” coords = “x1, Y1, R” ref = URL > indicates that the shape of the hotspot is a circle, the coordinates of the center of the circle are (x1, Y1), and the radius is r.
< area shape = “polygon” coords = “x1, Y1, X2, Y2…” is used to set the shape of the hotspot as a polygon, and the coordinates of each vertex are (x1, Y1), (X2, Y2), (X3, Y3).
Note: the positions of x1, Y1, X2, Y2 are determined by the picture, not by the size of the window.
The < area > mark divides the action area in the image map, so the action area must be within the area of the image map. Therefore, before using the < area > tag to divide the area, another HTML tag < Map > must be used to set the action area of the image map, and set a name for the specified image map. The usage of the tag is very simple, that is < map name = “image map name” > …… </map>。
Here is an example to illustrate the usage of these two Tags:
Here is a picture of a new bookshelf. The effect to be done is: when the mouse clicks on the book “web site Daquan”, a new window will be opened to display the introduction of the book and the web page of the order（ urlall.htm ）When you click on the book “Introduction to website design”, a new window will be opened to display the introduction and order page of the book（ siteall.htm ）When you click “web technology” A new window will be opened to display the introduction and order page of the book（ pagejqlall.htm ）。 Production method:
1. Insert the image and set the relevant parameters of the image, and set the parameter usemap = newbook “ismap in the < img > tag to indicate the reference to the image map (newbook);
2. Use < Map > tag to set the action area of image map, and name it: newbook;
3. Using < area > to mark the position of the three books, divide them into three rectangular action areas, and set their link parameters.
The source code of this example is as follows:
The code is as follows:
<area shape=”rect” coords=”56,69,78,139″ href=” urlall.htm ” target=”_ Blank “ALT = more than 100000 websites are collected here. “Title:” there are more than 100000 websites collected here. >
<area shape=”rect” coords=”82,70,103,136″ href=” siteall.htm ” target=”_ Blank “ALT = a primer for web designers. “Title =” a primer for web designers. >
<area shape=”rect” coords=”106,68,128,136″ href=” pageall.htm ” target=”_ Blank “ALT = a book that web page makers must read. “Title = a book that web page makers must read. >
Several points should be paid attention to when making the effect introduced in this paper
1. In the < img > tag, do not forget to set the parameters of usemap and ismap, and the parameter value of usemap must be the same as the value of name parameter in < Map > tag, that is, “image map name” should be consistent;
2. All hot spots in the same “image map” should be within the scope of the image map, that is, all < area > markers should be between < Map > and < / Map >;
3. The coordinate format set by the cords parameter in < area > tag should match the shape of the action area set by the shape parameter, so as to avoid the phenomenon that the coordinates of the vertex of the polygon area are set in the rectangle area of the shape parameter setting, but the vertex coordinates of the polygon area are set in the cords.
Differences between HTML and XHTML
In HTML, the < area > element does not need an end tag.
But in XHTML, the < area > element must be closed properly.
The DTD column indicates which document type supports this property. S=Strict，T=Transitional，F=Frameset。
|alt||text||Specify alternate text for a region||STF|
|coords||coordinate||Specifies the coordinates of an area||STF|
|href||URL||Specifies the link target for a region||STF|
|nohref||nohref||Indicates that there is no corresponding link in the region||STF|
|Specifies the shape of the area||STF|
|Indicate where to open the new page||TF|
The < area > tag supports the following core attributes:
|accesskey||character||Set keyboard shortcuts to access elements||STF|
|class||Class name||Indicates the class name of the element||STF|
|Specifies the text direction of the content in the element||STF|
|id||id||Indicates the unique ID of the element||STF|
|lang||Language code||Specifies the language code for the element content||STF|
|style||Style definition||Specifies the inline style of the element||STF|
|tabindex||number||Specifies the tab order of the elements||STF|
|title||text||Specifies the prompt text for the element||STF|
|xml:lang||Language code||The language code that specifies the content of an element in an XHTML document||STF|
More about core attributes.
The < area > tag supports the following event attributes:
|onblur||script||Executes the script when the element loses focus||STF|
|onclick||script||Execute the script when you click the mouse (left and right) within the element area||STF|
|ondblclick||script||Execute the script when you double-click the mouse in the element area, regardless of the left and right keys||STF|
|onfocus||script||Executes the script when the element gets focus||STF|
|onmousedown||script||Executes the script when the mouse button is pressed in the element area, regardless of the left and right keys||STF|
|onmousemove||script||Executes the script when the mouse pointer moves within the element area||STF|
|onmouseout||script||Executes the script when the mouse pointer moves out of the element area||STF|
|onmouseover||script||Executes the script when the mouse pointer moves into the element area||STF|
|onmouseup||script||Execute the script when you release the mouse button in the element area, regardless of the left and right keys||STF|
|onkeydown||script||Execute script when a key is pressed||STF|
|onkeypress||script||Execute the script when a key is pressed and released||STF|
|onkeyup||script||Execute script when a key is released||STF|