Using a good image of the action area Mark-area

Have you seen the interface of the "My Office" software presented by Lenovo on the Lenovo machine? In the picture of the office with a mouse click on the keyboard on the desk, you start a "Wubi font" typing exercise software, click on the desk Notepad to open a Notepad software, and so on, that is, and convenient image. The essence of this effect is to divide a picture into different areas of action, then let the different areas linked to the software to do different things, in the HTML also has a picture divided into many areas of action, and linked to different pages of the tag, that is <area> map action area mark.
<area> marks are mainly used for image maps, which can set the action area (also known as hot spots) in the image map, so that when the user clicks the mouse to the specified action area, it automatically links to the preset page. Its basic grammatical structure is as follows:
<area
Class=type
Id=value
Href=url
Alt=text
Shape=area-shape
Coods=value>
which Class and ID: is the type and ID number that specifies the hotspot, respectively.
Alt: Alternative text for setting a hotspot.
HREF: Used to set the URL address that the hotspot is linked to.
Shape and coords: are two main parameters that set the shape and size of the hotspot. Its basic usage is as follows:
<area shape= "rect" coords= "x1, y1,x2,y2" href=url> indicates that the shape of the set hotspot is rectangular, the upper-left corner vertex coordinates (X1,Y1), and the lower-right corner vertex coordinates (X2,Y2).
<area shape= "Circle" coords= "x1, y1,r" href=url> indicates that the shape of the set hotspot is circular, the center coordinates are (x1,y1) and the radius is R.
<area shape= "Poligon" coords= "x1, y1,x2,y2 ..." href=url> indicates that the shape of the set hotspot is a polygon, the coordinates of each vertex are (x1,y1), (X2,y2), (X3,Y3) ......。
<area> mark is divided into the image map of the area of Action, so its division of the role of the region must be in the image map area, so the use of the <area> tag area before dividing the region must use another HTML tag <map> to set the image map of the area of action and sets the name for the specified image map, which is simple to use, namely <map name= "image map name" > ... </map>.
Here is an example to illustrate the use of these two tags:

Here is a picture of a new bookshelf, to do the effect is: when the mouse point "web site Encyclopedia" This book, a new window, showing the book on the introduction and order of the page (urlall.htm); When the mouse point "website design Strategy" This book, new Open a window, Displays a brief description of the book and an Order page (siteall.htm); When the mouse dot "Web Tip", the book opens a new window that displays a brief introduction to the book and an Order page (pagejqlall.htm). Production method:
1, insert the picture, and set the parameters of the image, and set the parameters in the tag usemap= "Newbook" ismap to represent the reference to the image map (Newbook);
2, <map> The mark sets the action area of the image map, and it is named: Newbook
3, respectively, using <area> mark for three book position to divide three rectangular action area, and set its link parameter href.
Production completed, the source code for this example is as follows:
<map name= "Newbook"
<area shape= "Rect" coords= "56,69,78,139" href= "urlall.htm" target= "_blank" alt= "collects more than 100,000 URLs here. "Title=" collects more than 100,000 URLs here. ""
<area shape= "coords=" 82,70,103,136 "href=" siteall.htm "target=" _blank "alt=" website designer's primer. "title=" website designer's primer. ""
<area shape= "coords=" 106,68,128,136 "href=" pageall.htm "target=" _blank "alt=" web page makers have to read the book. "title=" Web page makers have to read books. "
</map>

A few points to note when making the effect described in this article:
1, in Mark do not forget to set Usemap, ismap parameters, and the Usemap parameter value must be the same as the name parameter value in the <map> tag, that is, "image map name" to be consistent;
2. All hotspots in the same "image map" should be in the range of image map, that is, all <area> marks should be between <map> and </map>;
3. The coordinate format of the cords parameter set in <area> mark should be matched with the shape parameter set, avoid the rectangular action region which is set in the shape parameter, but the polygon region vertex coordinate is set in the cords.