The purpose of the map tag is to use the IMG tag binding, which is often used to give the client image a special meaning in the area, click on the area to jump to the new document.
Because the map tag is used with the IMG tag, we need to add the ID and Name property to the map tag, let the Usemap attribute in the IMG tag refer to the ID in the map tag, or the Name property (the Usemap property receives the value of either of the two, because of the difference in the browser. So usually the name and ID attributes are both written and the values are the same, and are used with the area tag.
The sample code is as follows:
<!doctype html>The display results are as follows:
We can see that this is a map, if it is just a picture, it will be very monotonous, so we pass the map tag to each province to the meaning of the region, where I click on the Xinjiang region after the jump to Xinjiang Baidu Encyclopedia, such as:
So that we can directly understand the history and culture of each province, and do not have to go to a search, appear more humane.
The area tag defines the areas in the image that are given special meanings, and its main values are ALT, cooreds, href, shape, target, etc.
1. alt attribute
Definition: Alternate text for the specified area.
Description: If you write the href attribute, the ALT attribute is required
2. Cooreds Properties
Definition: Define the coordinates of the relevant area
Description: Use with the shape attribute
(1) When the Shape property is rect, representing the relevant area is a rectangle, then the Cooreds property value is (X1,y1,x2,y2), where X1,y1 is the coordinates of the upper-left corner, X2,y2 is the coordinates of the lower-right corner;
(2) When the shape attribute is circle, representing the relevant area as a circle, the Cooreds property value is (X,y,radius), where x, y is the center coordinate of the circle and radius is the radius of the circle;
(3) When the Shape property is poly, representing the relevant area as a polygon, the Cooreds property value is (X1,y1,x2,y2,x3,y3......xn,yn), which specifies the coordinates of each vertex of the polygon, since the browser automatically closes the polygon, So the tail coordinate does not have to be equal to the first coordinate.
3. href attribute
Definition: Defines the target of the relevant area
Description: href attribute generally has three kinds of values
(1) Absolute path: Usually used to point to other websites such as (href= "https://www.baidu.com")
(2) Relative path: typically used to point to a file within its own web site such as (href= "//favicon.ico")
(3) Anchor link: Usually used to point to the anchor in the page (href= "#header")
4. Shape Properties
Definition: Defines the shape of the relevant area
Description: (1) Default value: Specify All areas
(2) Rect: Specify the relevant area as a rectangle
(3) Circle: Specifies that the relevant area is circular
(4) Poly: The first closed area is a polygon
5. Target Property
Definition: Defines where to open a target link
Description: (1) _blank: Open the linked document in a new window
(2) _self: Default, open the linked document in the same frame
(3) _parent: Open the linked document in the parent frameset
(4) _top: Open the linked document throughout the window
(5) FrameName: Open the linked document in the specified frame
Description: The area tag can sometimes be used as a substitute for a tag, because a tag does not directly nest a tag, and in some cases we have to use it, so we can replace the a tag with an area tag to make the layout easier.
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
Jest test react native component What is the JS custom trim function Use method
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
