Add an anchor to an image

Hot links can help you solve the problem. The essence of this effect is to divide an image into different hotspot areas and then create hyperlinks for different areas. Three tags are used to complete the map area hyperlink: <map> <area>.

<Map Name = "Name of the anchor area on the graph">

<Area shape = shape coords = region coordinate list href = "url resource address">
<! -- How many hotspot regions can be defined as needed -->
<Area shape = shape coords = region coordinate list href = "url resource address">

</Map>

[1] shape -- Define hotspot shape
Shape = rect: rectangle
Shape = circle: Circle
Shape = poly: Polygon

[2] coords -- defines the coordinates of regional points

A. rectangle: four digits are required. The first two digits are the coordinates in the upper left corner, and the last two digits are the coordinates in the lower right corner.
Example: <area shape = rect coords =, 50, href = "url">

B. Circle: three digits must be used. The first two digits are the coordinates of the center, and the last digit is the radius length.
Example: <area shape = circle coords = 85,155, 30 href = "url">

C. Any image (polygon): Fill in the coordinates of each turning point of the image in order
Example: <area shape = poly coords = 232,70, 285,70, 90, 78 href = "url">

Note: If the image is in a div or other container, the upper left and lower right corner are coordinates relative to the position of the parent element.

Demo:






-->