Shulou(Shulou.com)06/01 Report--

This article is about how to use area photo hotspots in html. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The tag is mainly used in the image map, through which the action area (also known as hot spot) can be set in the image map, so that when the user's mouse moves over the specified action area, it will be automatically linked to the pre-set page. Its basic grammatical structure is as follows:

Class and id: specify the type of hotspot and the id number, respectively.

Alt: alternative text used to set hotspots.

Href: used to set the url address to which the hotspot is linked.

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

Indicates that the shape of the hotspot is rectangular, the vertex coordinates of the upper left corner are (X1), and the vertex coordinates of the lower right corner are (X2).

Indicates that the shape of the hot spot is set to be circular, the coordinate of the center of the circle is (X1), and the radius is r.

Indicates that the shape of the set hot spot is a polygon, and the coordinates of each vertex are (X1), (X2), and (X3).

Note: the position of x1century y1dx2j2 is determined according to the picture, not according to the size of the window.

The mark divides the action area in the image map, so the division action area must be in the image map area, so before dividing the area with the mark, you must use another mark of HTML to set the action area of the image map, and set the name for the specified image map, the use of this mark is very simple, namely.

Here is an example to illustrate the use of these two tags:

Here is a picture of a new bookshelf, the effect to be done is: when the mouse clicks on the book URL Daquan, a new window opens showing the introduction and order page of the book (urlall.htm); when the mouse clicks on the book, a new window is opened showing the introduction of the book and the web page of the order (siteall.htm) When the mouse clicks on the book "A complete Collection of Web skills", a new window opens showing a brief introduction to the book and a web page about orders (pagejqlall.htm). Production method:

1. insert the picture, and set the relevant parameters of the image, and in the

The parameter usemap= "newbook" ismap is set in the tag to represent a reference to the image map (newbook)

2. Use the tag to set the action area of the image map, and name it: newbook

3. Use the mark to divide three rectangular areas according to the position of the three books, and set the link parameter href.

The production is completed. The source code of this example is as follows:

Several points that should be paid attention to when making the effects introduced in this article:

1. In

Don't forget to set the usemap and ismap parameters for the tag, and the parameter value of usemap must be the same as the name parameter value in the tag, that is, the "image map name" must be the same.

2. All hot spots in the same "image map" should be within the scope of the image map, that is, all marks should be between and.

3. The coordinate format set by the cords parameter in the tag should match the shape of the action area set by the shape parameter, so as to avoid appearing in the rectangular action area set by the shape parameter, while the vertex coordinate of the polygonal region is set in cords.

The difference between HTML and XHTML

In HTML, an element does not need a closing tag.

In XHTML, however, the element must be closed correctly.

Thank you for reading! This is the end of this article on "how to use area picture hotspots in html". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.