HTML image Hot Zone map area usage

The <area> tag is used primarily for image maps, which allow you to set the area of action (also known as a hotspot) in an image map, so that when a user clicks on a specified action area, it automatically links to a pre-defined page. The basic syntax structure is as follows:

1

<area

2	class=type

3

id＝Value

4

href＝url

5

alt＝text

6	shape＝area-shape

7	coods＝value>

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) ......。

The <area> tag is divided into the area of the image map, so its division of the role of the area must be in the image map area, so before using the <area> Mark Division area must use another HTML tag <map> to set the action area of the image map and sets a name for the specified image map, the use of the tag is simple, i.e. <map name= "image map name" > ... </map>.

The following example illustrates the use of these two tokens:

Here is a picture of a new bookshelf, to do the effect is: when the mouse point "url Daquan" This book, a new window, showing the book's introduction and the Order of the page (urlall.htm); When the mouse point "website design Raiders" This book, a new window, A Web page showing an introduction to the book and an Order (siteall.htm); When the mouse clicks on the book "Web Tips Daquan", a new window appears, showing a page about the book's introduction and Order (pagejqlall.htm). Production method:

1. Insert the picture and set the parameters for the image, and set the parameter usemap= "Newbook" ismap in the tag to indicate a reference to the image map (newbook);
2. set the function area of the image map with <map> tag and named: Newbook;
The
3. uses the <area> tag to divide three rectangular action regions for three books, and sets its link parameter href.

1	< img  src = "image/htmlp3.gif"  width = "207"  height = Code class= "string" "148"  alt = "new Bookshelf"  hspace =  align = "left" usemap = "#newbook"  border = Code class= "string" > "0" >

2	< map   name = "Newbook" >

3	< area   shape = "rect"   coords = "56,69,78,139"   href = "urlall.htm"   target = "_blank"   alt =  title = " here collect more than 100,000 URLs. " >

4	< area   shape = "rect"   coords = "82,70,103,136"   href = "siteall.htm"   target = "_blank"   alt = " Web designer's primer. "   title = " Web designer's primer. " >

5	< area   shape = "rect"   coords = "106,68,128,136"   href = "pageall.htm"   target = "_blank"   alt = "page Creator should read the book." "   title = " page creators have to read books. " >

6

</map>

Here are a few things to keep in mind when making the effect of this article:

1. In the tag do not forget to set the Usemap, ismap parameters, 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 hotspot areas in the same image map are within the range of the image map, i.e. all <area> marks are between <map> and </map>;
3. The coordinate format of the cords parameter set in the <area> tag is matched with the shape parameter setting of the action area, avoiding the rectangular action area set by the shape parameter, and the vertex coordinate of polygon area is set in cords.

Coords Property

The Coords property of the <area> tag defines the coordinates of the mouse-sensitive area in the client image map. The number of coordinates and their meanings depend on the area shape that is determined in the Shape property. You can define a hyperlink area in a client-side image map as a rectangle, a circle, or a polygon.

The appropriate values for each shape are listed below:

Circle: Shape= "Circle", coords= "x, Y, z": The position of the center ("0,0" 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 define a vertex of the polygon ("0,0" is the coordinate of the upper-left corner of the image). Defining a triangle requires at least three sets of coordinates, while high-latitude polygons require a larger number of vertices. Polygons are automatically closed, so you don't need to repeat the first coordinate to close the entire area at the end of the list.

Rectangle: shape= "Rectangle", coords= "X1,y1,x2,y2": the first coordinate is the vertex coordinate of one corner of the rectangle, the other pair is the vertex coordinate of the diagonal, and "0,0" is the coordinate of the upper-left corner of the image. Note that the definition hold is actually a simplified method of defining a polygon with four vertices.

For example, the following XHTML fragment defines a mouse-sensitive area in the lower right one-fourth of a 100x100 pixel image, and defines a circular area in the middle of the image.

View Source print?

1	<mapname="map">

2	< area   shape = "rect"   coords = "75,75,99,99"   nohref = "Nohref" >

3	<areashape="circ" coords="50,50,25"nohref="nohref">

4

</map>

Note: If the coordinates and other areas in an area label overlap, the first occurrence of the region label is preferred. The browser ignores coordinates beyond the bounds of the image.

Ext.: http://www.nowamagic.net/html/html_MapArea.php

HTML image Hot Zone map area usage