The area mark is mainly used for image maps. It can be used to set the target area (also known as hotspot) in the image map. When you move your mouse over a specified area, will automatically link to the pre-configured page, the specific use of the following, no friends can refer to the below marked mainly for image map, this tag allows you to set the target area (also known as a hotspot) in the image map. When you move your mouse over the specified target area, the pre-configured page is automatically linked. The basic syntax structure is as follows:
Class and id: Specify the hotspot type and id respectively.
Alt: Used to set alternative text for hotspot.
Href: used to set the url address linked to the hotspot.
Shape and coords are two main parameters used to set the shape and size of a hotspot. The basic usage is as follows:
Indicates to set the shape of the hotspot to a rectangle. The vertices coordinate in the upper left corner is (X1, y1), and the vertices coordinate in the lower right corner is (X2, y2 ).
Indicates that the hotspot is set to a circle, the Center Coordinate is (X1, y1), and the radius is r.
Indicates that the shape of the Set hotspot is a polygon. The coordinates of each vertex are (X1, y1), (X2, y2), (x3, y3 ).......
Note: The positions of x1, y1, x2, and y2 are determined based on the image, not the window size.
Tags are used to divide the functional areas in an image map. Therefore, the functional areas must be in the area of the image map. Therefore, you must use another HTML tag before using tags to divide the area. To set the region of the image map and set the name of the specified image map........
The following uses an example to describe the usage of the two tags:
Here is a picture of the new bookshelf, the effect is: Success ). Production method:
1. Insert an image, set relevant parameters for the image, and set the parameter usemap = "newbook" ismap In the tag to indicate reference to the image map (newbook;
2. UseMark the region where the image map is located and name it newbook;
3. Divide the three rectangular fields based on the positions of the three books respectively, and set the Link parameter href.
The source code of this example is as follows:
The Code is as follows:
Note the following points when creating the results described in this article:
1. Do not forget to set usemap and ismap parameters during marking, and the usemap parameter value must be consistentThe value of the name parameter in the tag is the same, that is, the "Image Map name" must be the same;
2. All the hotspot areas in the same "image map" must be within the range of the image map, that is, all the tags must beAndBetween;
3. The coordinate format set by the cords parameter in the tag must be matched with the shape of the region to which the shape parameter is set, so that it does not appear in the region of the rectangle set by the shape parameter, what we set in cords is the coordinate of vertices in the polygon area.
Differences between HTML and XHTML
In HTML, elements do not need to end tags.
However, in XHTML, elements must be disabled correctly.
Required attribute
The DTD column indicates which document type supports this attribute. S = Strict, T = Transitional, F = Frameset.
| Attribute |
Value |
Description |
DTD |
| Alt |
Text |
Specify alternative text for a region |
STF |
Optional attributes
| Attribute |
Value |
Description |
DTD |
| Coords |
Coordinates |
Coordinates of a region |
STF |
| Href |
URL |
Specify the link target of a region |
STF |
| Nohref |
Nohref |
Indicates that there is no corresponding link in the region |
STF |
| Shape |
Default
Rect
Circle
Poly |
Shape of the specified area |
STF |
| Target |
_ Blank
_ Parent
_ Self
_ Top |
Indicates where to open the new page |
TF |
Core Attributes
Tags support the following core attributes:
| Attribute |
Value |
Description |
DTD |
| Accesskey |
Character |
Set keyboard shortcuts for access elements |
STF |
| Class |
Class Name |
Class Name of the specified Element |
STF |
| Dir |
Rtl
Ltr |
Specify the text direction of the content in the element |
STF |
| Id |
Id |
Unique id of the specified Element |
STF |
| Lang |
Language code |
Language code of the specified Element Content |
STF |
| Style |
Style Definition |
Embedded style of the specified Element |
STF |
| Tabindex |
Number |
Specify the Tab key sequence of the element. |
STF |
| Title |
Text |
Prompt Text of the specified Element |
STF |
| Xml: lang |
Language code |
Specifies the language code of the element content in the XHTML document. |
STF |
