Map label
Defines a client-side image map. An image map (Image-map) refers to an image with a clickable region.
The area element is always nested inside the map element. An AREA element defines a region in an image map.
The Usemap attribute in the IMG tag can refer to the ID or name attribute in the map tag (depending on the browser), so we should add the ID and name attribute to the map label at the same time.
Example
For example, we want to implement nine hotspot areas in the following diagram, and use the map tag without cutting the graph.
First use PS to get several coordinates:
Then the code implements:
CSS Code copy content to clipboardThat's it.
About Area
Area can be round (CIRC), Polygon (poly), Rectangle (rect), different shapes to select different coordinates (coords).
Circle: Shape= "Circle", coords= "X,y,z"
X,y is the center coordinate (x,y), and z is the radius of the circle.
Polygon: shape= "polygon", coords= "X1,y1,x2,y2,x3,y3,..."
Each pair of x,y coordinates defines one vertex (0,0) of a polygon as the coordinate of the upper-left corner of the image. Defining a triangle requires at least three sets of coordinates, and a higher-latitude polygon requires a larger number of vertices.
Rectangle: shape= "Rectangle", coords= "X1,y1,x2,y2"
The first coordinate is the vertex coordinate of one corner of the rectangle, the other pair is the vertex coordinate of the diagonal, and "0,0" is the coordinate of the upper-left corner of the image. Note that defining a rectangle is actually a simplified way to define a polygon with four vertices. (That is, you know the coordinates of the two points on the diagonal.) )
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
