HTML Practical Tutorial: Using the image hot zone

Tags are used primarily for image maps, which allow you to set the action area in an image map, which automatically links to pre-defined pages when the user clicks on the specified action area. It is recommended to learn HTML Advanced Tutorials with the following basic syntax structure:

650) this.width=650; "src=" Http://183.61.143.148/group1/M00/01/FA/tz2PlFQH5qrwJlZGAAAO19_hZzw347.png "/>

Shape and coords: are two main parameters used to set the shape and size of a hotspot. Its basic usage is as follows:

• Indicates that the shape of the set hotspot is a rectangle, the upper-left vertex coordinates are (x1,y1), and the lower-right corner coordinates are (x2,y2).

Tags are divided into the area of the image map, so that the role of the region must be in the area of the image map, so in order to divide the area with the tag must use another HTML tag to set the area of the image map, and set the name of the specified image map, the use of the tag is very simple, that is ....

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:

Coords Property

The Coords property of the label 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.

650) this.width=650; "src=" Http://183.61.143.148/group1/M00/01/FA/tz2PlFQH5tbhVXUbAAATKfl7ZfA160.png "/>

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. You can learn by logging into e -mentor Web.

• Indicates that the shape of the set hotspot is circular, the center coordinate is (x1,y1), and the radius is R.

• The shape of the set hotspot is a polygon, the coordinates of each vertex are (x1,y1), (X2,y2), (x3,y3) ....

• 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);

• Set the function area of the image map with the tag, and named: Newbook;

• The three-book location is divided into three rectangular action regions, and the link parameter href is set.

  650) this.width=650; "src=" Http://183.61.143.148/group1/M00/01/FA/tz2PlFQH5sGxDnAEAABBTwV5uho841.png "height=" 266 "Width=" 488 "/>
  

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

• In the tag do not forget to set the Usemap, ismap parameter, and the parameter value of Usemap must be the same as the name parameter value in the tag, that is, "image map name" to be consistent;

• All hotspot areas in the same image map must be within the range of the image map, i.e. all markers are between and;

• The coordinate format set by the cords parameter in the tag is matched with the shape parameter setting of the action area, avoiding the rectangular action area set by the shape parameter, whereas the polygon area vertex coordinates are set in cords.

HTML Practical Tutorial: Using the image hot zone