Html Tag | image map

1. Understand image tags

: Define an image.

<Map>: Define an image map.

<Area>: defines the clickable area in the image map.

Ii. Html <map> labels:

Defines a client image-map (an image in the clickable area)

1 <! -- The img label must contain the usemap attribute --> 2  3 <map name = "Map" id = "Map"> <! -- Map Tag name | the id attribute must be consistent with usemap of the img Tag --> 4 <area shape = "rect" coords =, 163,175 "href =" http://www.baidu.com "target =" _ blank "alt =" Enter Baidu "/> 5 <area shape =" circle "coords =" 249,88, 83 "href =" http://www.51cto.com "target =" _ blank "alt =" Enter 51cto "/> 6 <area shape =" poly "coords =" 517,36, 565, 71, 446,134,397,112,390, 60 "href =" http://www.csdn.com "target =" _ blank "alt =" go to csdn "/> 7 <area shape =" rect "coords =" 315,173,371,196 "href =" http://www.163.com "target = "_ blank" alt = "click to enter"/> 8 </map>

1 <area shape = "rect" coords = "0,0, 163,175"/> <! -- Rect: rectangle followed by four corners marked with the coordinates in the upper left corner (0, 0) of the entire image --> 2 <area shape = "circle" coords = "249,88, 83 "/> <! -- Circle: circle, followed by the coordinates in the upper left corner (0, 0) of the entire image. The first two determine the center of the circle, the last one is the radius --> 3 <area shape = "poly" coords = "517,36, 565,71, 446,134,397,112,390, 60"/>
<! -- Poly: irregular image, followed by coordinates marked with the coordinates in the upper left corner () of the image. Each angle has two coordinate values. So there is a relationship that doubles later -->

: