Detailed explanation of creating image mapping of tag in html

Junior front-end piece The following code is to create image mapping on the picture. I organized it myself and made a note. I hope it can also help friends who will learn later!

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="poly" coords="23,58,8,59,40,70" alt="Venus" href="venus.htm">
</map>

The shape in this code refers to the shape of the click area, and coords should refer to the coordinates of the link area in the image (in pixels).

shape
1.rectangle The coordinates are (x1, y1), the coordinates of the lower right corner vertex are (x2, y2)
2. Circle: (The center coordinate is (X1, y1), the radius is r)
3. Polygon: (each vertex The coordinates are (x1,y1), (x2,y2), (x3,y3)...)

The above is the detailed content of Detailed explanation of creating image mapping of tag in html. For more information, please follow other related articles on the PHP Chinese website!