Home > Developer > JavaScript
HTML <map> tag-create an image ing with clickable areas, map Images
Definition and usage
Define a client image ing. Image-map refers to an image with clickable areas.
All mainstream browsers support <map> labels.
Note: The area element is always nested inside the map element. The area element defines areas in image ing.
The usemap attribute in can reference the id or name attribute in <map> (depending on the browser). Therefore, we should add the id and name attributes to <map> at the same time.
InstanceImage ing with clickable areas:
<Html> <body> <p> click the planet on the image to enlarge them. </P> <map name = "planetmap" id = "planetmap"> <areashape = "circle" coords = "180,139, 14 "href ="/example/html/venus.html "target =" _ blank "alt =" Venus "/> <areashape =" circle "coords =" 129,161, 10 "href ="/example/html/mercur.html "target =" _ blank "alt =" Mercury "/> <areashape =" rect "coords =" 0, 0, 110,260 "href ="/example/html/sun.html "target =" _ blank" <= "Sun"/> </map> <p> <B> note: </B> the "usemap" attribute in the img element references the "id" or "name" attribute in the map element (based on the browser ), therefore, the "id" and "name" attributes are added to the map element at the same time. </P> </body>The effect is as follows (you can click to view the effect ):
Appendix: coords attribute definition and usage of <area> label
Coords specifies the x and y coordinates of the region.
Coords and shape attributes are used together to specify the size, shape, and position of the area.
The coordinate in the upper left corner of the image is ".
Explanation:<Area> the coords attribute of a tag defines the coordinates of the mouse-sensitive areas in the client image ing. The number and meaning of coordinates depend on the shape of the area in the shape attribute. You can define the hyperlink area in the client image ing as a rectangle, circle, or polygon.
The appropriate values for each shape are listed below:
Circle: shape = "circle", coords = "x, y, z"Here, x and y define the center position ("" is the coordinate of the upper left corner of the image), and r is the circle radius in pixels.
Polygon: shape = "polygon", coords = "x1, y1, x2, y2, x3, y3 ,..."Each pair of "x, y" coordinates defines a vertex of the polygon ("" is the coordinate of the upper left corner of the image ). Defining a triangle requires at least three sets of coordinates, and a polygon requires more vertices.
The polygon is automatically closed. Therefore, you do not need to repeat the first coordinate at the end of the list to close the entire area.
Rectangle: shape = "rectangle", coords = "x1, y1, x2, y2"The first coordinate is the vertex coordinate of one angle of the rectangle, the other is the diagonal vertex coordinate, and "" is the coordinate of the upper left corner of the image. Note that defining a rectangle is actually a simplified method for defining polygon with four vertices.
For example, the following XHTML segment defines a mouse-sensitive area in the lower right corner of a 100x100 pixel image and defines a circular area in the middle of the image.
<map name="map"> <area shape="rect" coords="75,75,99,99" nohref="nohref"> <area shape="circ" coords="50,50,25" nohref="nohref"></map>Tips and commentsNote: If the coordinates of an area label overlap with those of other areas, the first area label will be used first. The browser ignores coordinates beyond the image boundary range.
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
