Map tags in html

Image map Hyperlinks,<map> tags on images

In HTML, you can also divide a picture into hot areas, each of which links to resources on different pages. The essence of this effect is to divide a picture into different hotspot areas, and then make the hyperlinks in different areas. This is the image map. To complete the map area hyperlink to use three kinds of labels:<map><area> The following describes the usage of these tags:

Image map Label Usage format:

<!--to set the parameter usemap= "#图的名称" ismap in the tag when inserting a picture to represent a reference to the image map (the name of the diagram);-->

<map name= "Name of the chart" >

<!--use <map> tags to set the action area of the image map, and use the Name property to name the image.

<area shape= Shape coords= area coordinates list href= URL resource address >

...... How many hotspot areas can be defined as needed

<area shape= Shape coords= area coordinates list href= URL resource address >

</map>

"1" shape--Define the hot spot shape

Shape=rect: Rectangle

Shape=circle: Round

Shape=poly: Polygon

"2" coords--defines the coordinates of the area point

A. Rectangle: must use four digits, the first two digits are the upper left corner coordinates, the last two digits is the lower right corner coordinates

Example: <area shape=rect coords=100,50,200,75 href= "URL" >

B. Circle: Must use three digits, the first two digits are the coordinates of the center, the last digit is the radius length

Example: <area shape=circle coords=85,155,30 href= "URL" >

C. Arbitrary graphics (polygons): Fill in the shape each inflection point coordinate

Example: <area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href= "URL" >

Here is an example

<map name= "Planetmap" id= "Planetmap" >
<area shape= "Circle" coords= "180,139,14" href = "venus.html" alt= "Venus"/>
<area shape= "Circle" coords= "129,161,10" href = "mercur.html" alt= "Mercury"/>
<area shape= "rect" coords= "0,0,110,260" href = "sun.html" alt= "Sun"/>
</map>

Here are a few things to keep in mind when making the effect of this article:

1, in the mark do not forget to set the Usemap, ismap parameters, and the Usemap parameter value must be the same as the value of the name parameter in the <map> tag, that is, "image map name" to be consistent;

2. All hotspots in the same "image map" should be within the scope of the image map, that is, all <area> marks should be between <map> and </map>;

3, the cords parameter in the <area> tag set the coordinate format to match the shape parameter setting of the action area shapes, to avoid appearing in the shape parameter set rectangle action area, but in the cords is set in the polygon area vertex coordinates phenomenon appears.