HTML5 image Hot Area,map usage

Today I saw a HTML5 in the picture above create a hot spot label, so-called picture hot spot is to give you a picture then you can set click the picture different location to enter the different link! If the following is a picture, inside the rectangle, circle, triangle area can go to other pages!

Let's take a sample of the usage of these tags in Map,area!

1, making rectangular hotspots

(1), the shape tag represents the hot spot, has a rectangle (rectangle), Circle (Circle), Polygon (polygon), and the entire picture (default)

(2), coords is the coordinate of each shape, different shape coordinates represent different! The coordinate of the upper rectangle (x1,y1,x2,y2), where (x1,y1) is the coordinate of the upper-left corner of the rectangle, (x2,y2) is the coordinate of the lower-right corner of the rectangle

2, make circular hot spots

The coordinate of the circle (X,y,radius), where (x, y) is the coordinate of the center, RADIUS is the radius of the circle

3, make a polygon hotspot (triangle below)

Polygon coordinates (X1,Y1,X2,Y2,X3,Y3,...) How many sets (x, y) coordinates have several corners, that is, the coordinates of each corner of the polygon are in coords!

Attention:

1,coords the coordinates are in accordance with the size of the picture, not according to the size of the browser window! So the coordinates of the top left corner of the picture are (0,0), the lower right corner is (the image's length, the width of the picture)

2, generally this determines the coordinates of the area you want, it is impossible to see the eyes alone, so you need to use the Screenshot tool to determine the coordinates of the area! Open the Screenshot tool, and from the top left corner of the picture, pull to the point you want, the length and width of the display is the coordinates of this point!

Want to get the updated content of Wang Yip's personal blog in time every day? Quickly add the public number "LY89CN", or scan the QR code below!

This article originates from the personal blog of Wang Ye Building, this article address: http://www.ly89.cn/detailB/62.html

Welcome to share this article, reprint please indicate the source and address of this article

HTML5 image Hot Area,map usage