The application of the map label and area label in html, and the htmlmap label area

The application of the map label and area label in html, and the htmlmap label area

Map tag usage:It is bound to the img label and is often used to give the client an image a special meaning in a certain area. Click this area to jump to a new document.

Because the map tag is bound to the img tag, we need to add the ID and name attributes to the map tag, let the usemap attribute in the img Tag reference the id or name attribute in the map tag (because of the difference in the browser, the usemap attribute receives the value of one of the two, so usually both the name and id attributes are written, ), and use it with the area label.

The sample code is as follows:

<! Doctype html> 
The display effect is as follows:

 
We can see that this is a map. If it is just an image, it will be very monotonous. Therefore, we use the map label to assign meaning to the regions of each province, here, I click the Xinjiang region to jump to the Baidu encyclopedia in Xinjiang, for example:

 
In this way, we can directly understand the history and culture of each province, instead of searching one by one.
The area tag defines the areas in the image with special meanings. Its main values include alt, cooreds, href, shape, and target.
1. alt attributes
Definition: alternative text of the specified area.
Note: If the href attribute is written, the alt attribute is required.
2. cooreds attributes
Definition: defines coordinates of the relevant regions
Description: used with the shape attribute.
(1) When the shape attribute is rect and the relevant area is a rectangle, The cooreds attribute value is (x1, y1, x2, y2), where x1 and y1 are the coordinates in the upper left corner, x2 and y2 are the coordinates in the lower right corner;
(2) When the shape attribute is circle, it indicates that the relevant area is circular, then the cooreds attribute value is (x, y, radius), where x and y are the center coordinates of the circle, radius indicates the radius of the circle;
(3) When the shape attribute is poly, it indicates that the relevant area is a polygon, then the cooreds attribute value is (x1, y1, x2, y2, x3, y3 ...... xn, yn) specifies the coordinates of each vertex of a polygon. Because the browser automatically closes the polygon, the tail coordinates do not have to be equal to the first coordinates.
3. href attributes
Definition: defines the target of the relevant region
Note: href attributes generally have three values.
(1) absolute path: usually used to point to other websites such as (href = "https://www.baidu.com ")
(2) Relative Path: usually used to point to a file in the website, such as (href = "// favicon. ico ")
(3) anchor link: usually used to point to an anchor in a page, such as (href = "# header ")
4. shape attributes
Definition: defines the shape of the relevant area
Note: (1) default Value: specifies all regions
(2) rect: specifies that the relevant area is a rectangle.
(3) circle: indicates that the relevant area is circular.
(4) poly: The first off area is a polygon.
5. target attributes
Definition: defines where to open the target Link
Note: (1) _ blank: Open the linked document in a new window.
(2) _ self: by default, the linked document is opened in the same framework.
(3) _ parent: Open the linked document in the parent framework set
(4) _ top: Open the linked document throughout the window
(5) framename: Open the linked document in the specified framework
Note: The area tag can also be used as a substitute for the tag in some cases, because the tag cannot be directly nested with the tag. In some cases, we have to use it again, then we can replace the label with the area label to make the layout easier.