Home > Web Front-end > HTML Tutorial > map tag in Html

map tag in Html

巴扎黑
Release: 2017-06-27 13:37:10
Original
1920 people have browsed it

Image of imageMapHyperlink, Tag brief discussion

You can also put it in HTML Picture is divided into multiple hotspot areas, and each hotspot area links to resources on different web pages. The essence of this effect is to divide a picture into different hotspot areas, and then allow different areas to be hyperlinked. This is the image map. To complete the map area hyperlink, three tags are used: The following is an introduction to the usage of these tags:

The usage format of the Image Map tag:

                                                                                                                                               Set the parameter usemap="#name of the picture" ismap in the img> tag to indicate a

reference to the image map (name of the picture)

;-->

# & lt;!-Use & lt; map & gt; mark the area of ​​the image map, and use the name

attribute

as the image-& gt;

                                                                                                                                                                                                                                                            .

【1】

shape -- Define hotspot shape

                                                                                                            use using using using using using using out out out out through out ’ s ’ through ’ s ‐ ‐ ‐ ‐ ‐ shape=rect: rectangle

                  shape=circle:                            shape=poly: Polygon

【2】coords -- define the coordinates of the area point

a. Rectangle: Four numbers must be used, the first two numbers are the coordinates of the upper left corner , the last two numbers are the coordinates of the lower right corner

Example:

b. Circle: required Use three numbers, the first two numbers are the coordinates of the center of the circle, and the last number is the radius length

Example:

c. Any graphic (polygon): Fill in the coordinates of each turning point of the graphic in sequence

Example:

Here is an example

Planets

 

  Venus

  coords="0,0,110,260" href ="sun.html" alt="Sun" />

 

In the production of the information introduced in this article Several points that should be paid attention to when using the effect: 1. Don’t forget to set the usemap and ismap parameters in the tag, and the parameter value of usemap must be the same as the name parameter value in the tag. That is to say, the "image map name" must be consistent;

2. All hotspot areas in the same "image map" must be within the scope of the image map, that is, all tags must be within < Between map> and
;


3. The coordinate format set by the cords parameter in the tag must match the shape of the area set by the shape parameter to avoid appearing in the shape The phenomenon occurs that the rectangular effect area set by the parameters is the vertex coordinates of the polygonal area set in the cords.


Image map hyperlink,Tag brief discussion

In HTML, pictures can also be divided into multiple hotspot areas, and each hotspot area links to resources on different web pages. The essence of this effect is to divide a picture into different hotspot areas, and then allow different areas to be hyperlinked. This is the image map. To complete the map area hyperlink, three tags are used: The following is an introduction to the usage of these tags:

The usage format of the Image Map tag:

                                                                                                                                               Set the parameter usemap="#map name" ismap in the img> tag to indicate a reference to the image map (map name); -->

                                                                                                                                                                                         coords=area coordinate list href="URL resource address">

 …how many hotspot areas can be defined as needed

 

【1】

shape -- Define hotspot shape

        shape=rect: rectangle

                    shape=circle:                                                                                                     use using using using using     out out out through out through ’     ’ ‐ ‐ ‐ ‐ ‐ ‐‐ ‐ and ##【2】coords -- define the coordinates of the area point

a. Rectangle: Four numbers must be used, the first two numbers are the coordinates of the upper left corner, and the last two numbers are the coordinates of the lower right corner

                                                                                                                                                                                                            ‐                                                                                         # Coordinates, the last number is the radius length

Example:

c. Any shape (polygon): Fill in the coordinates of each turning point of the graph in sequence. Example:

The following is an example

Planets

 

   Venus

  shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

   Sun

 

Some points you should pay attention to when creating the effects introduced in this article:

1. Don’t forget to set the usemap and ismap parameters in the tag, and the parameter value of usemap must be the same as the name parameter value in the tag, that is to say, the "image map name" must be consistent;

2. All hotspot areas in the same "image map" must be within the scope of the image map, that is, all tags must be between and ;

  3. The coordinate format set by the cords parameter in the tag must match the shape of the action area set by the shape parameter, to avoid appearing in the rectangular action area set by the shape parameter, and set in the cords However, the phenomenon of the vertex coordinates of the polygon area appears.

The above is the detailed content of map tag in Html. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template