Home >Web Front-end >CSS Tutorial >How to use map tag and area tag

How to use map tag and area tag

php中世界最好的语言Original: 2018-03-19 09:20:112987browse

This time I will show you how to use map tags and area tags, and what are the precautions for map tags and area tags. The following is a practical case, let's take a look.

The purpose of the map tag: is bound to the img tag and is often used to give a special meaning to a certain area of the client image. , 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, and let the usemap attribute in the img tagQuoteThe id or name attribute in the map tag (due to different browsers, the usemap attribute receives the value of one of the two, so usually both the name and id attributes are written with the same value), and matched with the area tag for use.

The sample code is as follows:

<!doctype html>
<html>
    <head></head>
    <body>
        <img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中国地图" usemap="#province"/>
	<map name="province" id="province">
	    <area shape="rect" coords="80,112,110,125"  alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin">
	    <area shape="rect" coords="77,209,110,229"  alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045">
	    <area shape="rect" coords="150,176,185,192"  alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638">
	    <area shape="rect" coords="197,236,235,261"  alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569">
	    <area shape="rect" coords="170,300,211,325"  alt="云南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207">
	    <area shape="circle" coords="227,200,8"  alt="甘肃" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="240,177,5"  alt="宁夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="285,133,8"  alt="内蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	</map>
    </body>
</html>

The display effect is as follows:

We can It can be seen that this is a map. If it is just a picture, it will look very monotonous, so we use the map tag to give meaning to the regions of each province. Here I click on the Xinjiang region and jump to Xinjiang's Baidu Encyclopedia, as shown below:

In this way, we can directly understand the history and culture of each province without having to Searching one by one makes it more humane.

The area tag defines the area in the image that is given special meaning. Its main values are alt, cooreds, href, shape, target, etc.

1, alt Attribute

Definition: Specifies the alternative text of the area.

Note: If you write the href attribute, the alt attribute is required

2. Cooreds attribute

Definition: Define the coordinates of the relevant area

Description: Used with the shape attribute

　（1 ) When the shape attribute is rect, it means that the relevant area is a rectangle, and the coordinates attribute value is (x1, y1, x2, y2), where x1, y1 are the coordinates of the upper left corner, and x2, y2 are the coordinates of the lower right corner;

　 (2) When the shape attribute is circle, it means that the relevant area is a circle, and the coordinates attribute value is (x, y, radius), where x, y are the center coordinates of the circle , radius is the radius of the circle;

(3) When the shape attribute is poly, it means that the relevant area is a polygon, and the cooreds attribute value is (x1,y1,x2,y2, x3,y3......xn,yn), specifies the coordinates of each vertex of the polygon. Since the browser will automatically close the polygon, the tail coordinates do not have to be equal to the first coordinate.

3. href attribute

Definition: Defines the target connected to the relevant area

Note: The href attribute generally has 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 within your own website such as (href="//favicon.ico")

　(3) Anchor link: usually used to point to the anchor in the page such as (href="#header")

4, shape attribute

Definition: defines the shape of the relevant area

Description: (1) Default value (default): Specifies all areas

(2) RECT: The relevant area is rectangular

This (3) CIRCLE: The relevant area is circular

# This # # Where to open the target link

Instructions: (1)_blank: Open the linked document in a new window

(2)_self: By default, the linked document is opened in the same frame. 4) _top: Open the linked document in the entire window

(5) framename: Open the linked document in the specified frame

Description : The area tag can sometimes be used as a substitute for the a tag, because the a tag cannot directly nest the a tag. In some cases, we have to use it, then we can replace the a tag with the area tag to make the layout more beautiful. Simple.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use map tag and area tag

Related articles