You can position a few points on a picture and then create a clickable hot spot to form a clickable area, which is often used on some shopping sites, very simple and very useful:
First, you will want to display the picture, using HTML tags to display it in the page, the code is simple, do not explain too much. But here's a key, less commonly used attribute, which is usemap, which specifies the map you want to select, and which map to use to show the links. The sample code is as follows:
Next, you define map maps and block them to differentiate between different content areas.
Map maps are made up of <map> tags and <area> tags. <map> label definition is very simple, just declare ID and name can, because different browsers recognize the label is not the same, so the ID and name are both indispensable. <area> tags because they are not used, the following chart shows the exact meaning of each attribute.
Property |
Value |
Describe |
Coords |
Coordinate value |
Defines the coordinates of clickable areas (areas that are sensitive to the mouse). |
Href |
Url |
Defines the destination URL for this zone. |
Shape |
Default Rect Circ Poly |
Defines the shape of a range. |
Target |
_blank _parent _self _top |
Specifies where to open the destination URL specified by the href attribute. |
The sample code for map maps is as follows:
<map name= "Imgmap" id= "Imgmap" > <area shape= "Circle" coords= "180,139,14" href = "venus.html" alt= "Venus"/> <area shape= "Circle" coords= "129,161,10" href = "mercur.html" alt= "Mercury"/> <area shape= "rect" coords= "0,0,110,260" href = "sun.html" alt= "Sun"/> </map> |
So far, we can easily create our own picture map. However, the coordinates of an element in a picture are still a problem for many small partners, because ordinary looking software cannot see the coordinates of each element at all. Here, we recommend an online tool: Image-maps. We only need to register an account on the image-maps, we can through the visual tool to tailor the picture to get the coordinates of the cropped picture.