Use of image hotspots, usage of html <area>_html/css

Use of image hotspots, usage of html _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:34:38

Original

1686 people have browsed it

tag is mainly used in image maps. Through this tag, the action area (also called hotspot) can be set in the image map, so that when the user moves the mouse to the specified action area When clicked, it will automatically link to the preset page. The basic syntax structure is as follows:

Class and id: specify hot spots respectively The type and id number.

alt: Alternative text used to set hotspots.

href: used to set the url address linked to the hotspot.

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

　 means setting the shape of the hotspot to a rectangle, and the coordinates of the upper left corner vertex are (X1 , y1), the coordinates of the lower right corner vertex are (X2, y2).

　 Indicates that the shape of the hotspot is set to be a circle, the center coordinates are (X1, y1), and the radius is r.

　Indicates that the shape of the hotspot is set to a polygon, and the coordinates of each vertex are ( X1,y1), (X2,y2), (x3,y3)….

Remarks: The positions of x1, y1, x2, y2 are determined based on the picture, not the size of the window.

& lt; area & gt; marked is divided into the area in the image map, so the area of its division must be Another tag is used to set the scope of the image map and set a name for the specified image map. The usage of this tag is very simple, namely .... .. .

The following is an example to illustrate the usage of these two tags:

Here is a picture of a new bookshelf. The effect is: when the mouse clicks " When the mouse clicks on the book "Website Design Guide", a new window will be opened to display the introduction to the book and the webpage for the order (urlall.htm); when the mouse is clicked on the book "Website Design Guide", a new window will be opened to display the information about the book. The book's introduction and order webpage (siteall.htm); when the mouse clicks on the book "Web Page Skills Encyclopedia", a new window will be opened to display the book's introduction and order's webpage (pagejqlall.htm). Production method:

1. Insert the image, set the relevant parameters of the image, and set the parameter usemap="newbook" ismap in the tag to indicate a reference to the image map (newbook);

2. Use the mark to set the area of effect of the image map and name it: newbook;

3. Use the mark to target the locations of the three books. Divide three rectangular action areas and set their link parameter href.

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

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

Several points you should pay attention to when creating the effects introduced in this article:

　1. . Don’t forget to set the usemap and ismap parameters in the tag, and the parameter value of usemap must be the same as the name parameter value in the tag, that is to say, the "image map name" must be consistent;

2. All hotspot areas in the same "image map" must be within the scope of the image map, that is, all tags must be between and ;

3. The coordinate format set by the cords parameter in the tag must match the shape of the action area set by the shape parameter, to avoid appearing in the rectangular action area set by the shape parameter, while the coordinate format set in cords It is the phenomenon of the vertex coordinates of the polygon area.

Differences between HTML and XHTML

In HTML, the element does not require a closing tag.

But in XHTML, the element must be closed correctly.

Required attribute

The DTD column indicates which document type supports this attribute. S=Strict, T=Transitional, F=Frameset.

Attribute value description DTD alt text specifies alternative text for a region STF Optional attributes attribute value description DTD coords coordinates specifies the coordinates of a region STF href URL specifies the link target of a region STF nohref nohref indicates that there is no corresponding link in the region STF shape default
rect
circle
poly specifies the shape of the area STF target _blank
_parent
_self
_top indicates where to open a new page TF

core attributes The

tag supports the following core attributes:

Attribute value description DTD accesskey character sets the keyboard shortcut for accessing the element STF class class name specifies the class name of the element STF dir rtl
ltr specifies the content in the element Text direction STF id id specifies the unique id of the element STF lang language code specifies the language code of the element content STF style style definition specifies the embedded style of the element STF tabindex number specifies the tab key order of the element STF title text specifies the prompt text of the element STF xml: The lang language code specifies the language code STF for the content of the element in the XHTML document

More information about core attributes.

Event attributes

tag supports the following event attributes:

Attribute value description DTD onblur script executes the script when the element loses focus STF onclick script clicks the mouse within the element area The script STF is executed when the mouse button is double-clicked in the element area (without distinguishing the left and right keys). The script STF is executed when the mouse button is double-clicked in the element area (the left and right buttons are not distinguished). (distinguish between left and right keys). STF onmousemove script executes the script when the mouse pointer moves within the element area. STF onmouseout script executes the script when the mouse pointer moves out of the element area. STF onmouseover script executes the script when the mouse pointer moves into the element area. STF onmouseup script executes the script on the element area. The script STF is executed when the mouse button is released in the area (the left and right keys are not distinguished). The onkeydown script executes the script STF when a key is pressed. onkeypress The script executes the script STF when a key is pressed and released. onkeyup The script executes the script STF when a key is released.