Html5 image hotspot area, map usage,

Html5 image hotspot area, map usage,

Today, I saw an html5 tag that creates a hotspot on the image. The so-called image hotspot is to give you an image and then you can set to click different image locations to access different links! If the following is an image, you can access other webpages in the rectangle, circle, and triangle area!

 

Next, we will introduce the usage of map and area labels!

 

1. Create a rectangular hotspot

(1) the shape label indicates the shape of the hotspot, including the rectangle, circle, polygon, and default)

(2) coords is the coordinates of each shape. The coordinates of different shapes indicate different! The coordinates of the above rectangle (x1, y1, x2, y2), where (x1, y1) are the coordinates of the upper left corner of the rectangle, (x2, y2) is the coordinates of the lower right corner of the rectangle

 

2. Create a circular hotspot

The coordinates of the circle (x, y, radius), where (x, y) is the coordinates of the center, radius is the radius of the circle

 

3. Create a polygon hotspot (triangle below)

Coordinates of a polygon (x1, y1, x2, y2, x3, y3 ,...) the number of group (x, y) coordinates has several angles. That is to say, the coordinates of each angle of a polygon must be in coords!

Note:

1. coords coordinates are based on the image size, not the browser window size! So the coordinates in the upper left corner of the image are (0, 0), and the lower right corner is (the image length and image width)

2. Generally, the coordinates of the desired region cannot be viewed by eyes alone. Therefore, you need to use the screenshot tool to determine the coordinates of the region! Open the screenshot tool and draw the desired point from the upper left corner of the image. The length and width are the coordinates of the point!

Do you want to get updates from Wang yelou's personal blog every day? Add the Public Account"Ly89cn", Or scan the QR code below!

This article from Wang yelou's personal blog, this article address: http://www.ly89.cn/detailB/62.html

You are welcome to share this article. For more information, see the source and address of this article.