Home > Developer > Web Develop
Hot picture Area production (online production): http://imagemap-generator.dariodomi.de/
1, insert the picture, and set the relevant parameters of the image, and set the parameter usemap= "#Map" in the tag to indicate the reference to the image map;
2. Set the function area of image map with <map> tag, and named: map;
3, respectively, with the <area> mark for the corresponding location of a plurality of rectangular action area, and set its link parameter href.
<area class= "type" id= "value" href= "url" alt= "text" shape= "Area-shape" coods= "value" >
Class and ID: Specifies the type and ID number of the hotspot, respectively.
Alt: Alternative text for setting a hotspot.
HREF: Used to set the URL address to which the hotspot is linked.
Shape and coords: are two main parameters used to set the shape and size of a hotspot. Its basic usage is as follows:
<area shape= "rect" coords= "x1, y1,x2,y2" href=url> indicates that the shape of the hotspot is rectangular, the top-left vertex coordinates are (x1,y1), and the lower-right corner coordinates are (x2,y2).
<area shape= "Circle" coords= "x1, y1,r" href=url> means the shape of the set hotspot is circular, the center coordinate is (x1,y1), and the radius is R.
<area shape= "Poligon" coords= "x1, y1,x2,y2 ..." href=url> indicates that the set hotspot is shaped as a polygon, each vertex coordinate is (x1,y1), (X2,y2), (X3,Y3) ......。
Note:x1, y1,x2,y2 the location of these points is based on the picture, not depending on the size of the window.
some points to be aware of when making the effect:
1, in the mark do not forget to set the Usemap parameter, and the Usemap parameter value must be the same as the value of the name parameter in the <map> tag, that is, "image map name" to be consistent;
2. All hotspots in the same "image map" should be within the scope of the image map, that is, all <area> marks should be between <map> and </map>;
3, the cords parameter in the <area> tag set the coordinate format to match the shape parameter setting of the action area shapes, to avoid appearing in the shape parameter set rectangle action area, but in the cords is set in the polygon area vertex coordinates phenomenon appears.
Area tags are primarily used for image maps, which can be set in the image map (also known as hot spots), when the user's mouse moves to the specified area of the click, will automatically link to the pre-set page,
<HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><Body>
<src= "url/to/your/image.jpg" alt= "" Usemap = "#Map"/>
<map name= "map" id= "map" > <area title= "" href= "#" shape= "Poly" coords= " 65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82 , 131,159,117 "/> <area title=" "href=" # "shape=" poly "coords=" 28,22,57,20,36,39,27,61 "/> < /map>
</ Body >
Usemap= "#map", map as hotspot area
Three properties of area:
Shape:rect (Rectangle): Two of the four values of the coords the upper-left corner, the lower-right corner of the horizontal ordinate, in pixels. Circle (Circle): coords three distinct values do not indicate the center horizontal ordinate and radius, in pixels. Poly (Polygon): Multiple values of coords represent the horizontal ordinate of each vertex, in pixels.HTML area image hotspot
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
