The use of HTML Map-area

Use background

When the setting diagram to the page, often encounter this situation: a small picture has a lot of small icons can be clicked, according to the usual method is to cut out this one of the small figure, and then each add a tag to jump, but this will be a very waste of time, and will increase the number of page pictures, Slow down the loading speed of the page, so let's take this picture as an example, add a map to the top 3 small images.

Use of Map-area

In the IMG tag there is a Usemap attribute, the value is the map ID or name, with the map image form:

Map and area tags

<map name= "MyMap" id= "MyMap" >
<area shape= "rect" coords= "0, 336, 148" href= "http://www.baidu.com" target= "_blank" alt= "Baidu" > <area Shap E= "rect" coords= "370, 0,610, 148" href= "http://www.google.com" target= "_blank" alt= "Google" ></map>

• Map has the ID and name attribute, it is best to write both the ID and the name attribute, so that there is better compatibility.
• Area's Shape property, which is a lot of values, the most commonly used are rect (rectangle) and Circ (round)
• The href attribute of area is the target address that you click to jump to
• The target and ALT attributes of area, like the <a> attribute, do not say much
• The Coords property of area, which represents the coordinates of the two points in the upper-left and lower-right corners of the rectangle, we'll consider, for example, how to calculate the coordinates.

Calculate coordinates

First we open Photoshop, I use Photoshop cc, shortcut key ctrl+r (Mac Command+r) to open the ruler

We can go through the position of the red box is the 2 points we need, through the ruler line we can get the corresponding coordinates (75,0,336,148).

Can pass this method can accurately get coordinates, if want to not be particularly accurate to take coordinates, we can through QQ tool to take, here no longer demonstrates!

The use of HTML Map-area