How to use HTML area image hotspots

Time:2020-10-27

The < area > tag is mainly used for image map, through which the active area (also known as hotspot) can be set in the image map, so that when the user’s mouse moves to the specified action area and clicks, it will automatically link 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>

Class and ID: specify the type and ID number of the hotspot respectively.

ALT: alternative text for setting hotspots.

It is used to set the URL address of 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:

< area shape = “record” coords = “x1, Y1, X2, Y2” ref = URL > indicates that the shape of the hotspot is rectangular, the coordinates of the top left corner vertex and the lower right corner vertex are (x1, Y1) and (X2, Y2).

< area shape = “circle” coords = “x1, Y1, R” ref = URL > indicates that the shape of the hotspot is a circle, the coordinates of the center of the circle are (x1, Y1), and the radius is r.

< area shape = “polygon” coords = “x1, Y1, X2, Y2…” is used to set the shape of the hotspot as a polygon, and the coordinates of each vertex are (x1, Y1), (X2, Y2), (X3, Y3).

Note: the positions of x1, Y1, X2, Y2 are determined by the picture, not by the size of the window.  

The < area > mark divides the action area in the image map, so the action area must be within the area of the image map. Therefore, before using the < area > tag to divide the area, another HTML tag < Map > must be used to set the action area of the image map, and set a name for the specified image map. The usage of the tag is very simple, that is < map name = “image map name” > …… </map>。

Here is an example to illustrate the usage 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 “web site Daquan”, a new window will be opened to display the introduction of the book and the web page of the order( urlall.htm )When you click on the book “Introduction to website design”, a new window will be opened to display the introduction and order page of the book( siteall.htm )When you click “web technology” A new window will be opened to display the introduction and order page of the book( pagejqlall.htm )。 Production method:

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

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

3. Using < area > to mark the position of the three books, divide them into three rectangular action areas, and set their link parameters.

The source code of this example is as follows:

Copy code

The code is as follows:

<img src=” https://imgs.developpaper.com/imgs/logo.gif “Width =” 207 “height =” 148 “ALT = new bookshelf” hspace = “10” align = “left” usemap “ා newbook” border = “0” > “
<map name=”newbook”>
<area shape=”rect” coords=”56,69,78,139″ href=” urlall.htm ” target=”_ Blank “ALT = more than 100000 websites are collected here. “Title:” there are more than 100000 websites collected here. >
<area shape=”rect” coords=”82,70,103,136″ href=” siteall.htm ” target=”_ Blank “ALT = a primer for web designers. “Title =” a primer for web designers. >
<area shape=”rect” coords=”106,68,128,136″ href=” pageall.htm ” target=”_ Blank “ALT = a book that web page makers must read. “Title = a book that web page makers must read. >
</map>

Several points should be paid attention to when making the effect introduced in this paper

1. In the < img > tag, do not forget to set the parameters of usemap and ismap, and the parameter value of usemap must be the same as the value of name parameter in < Map > tag, that is, “image map name” should be consistent;

2. All hot spots in the same “image map” should be within the scope of the image map, that is, all < area > markers should be between < Map > and < / Map >;

3. The coordinate format set by the cords parameter in < area > tag should match the shape of the action area set by the shape parameter, so as to avoid the phenomenon that the coordinates of the vertex of the polygon area are set in the rectangle area of the shape parameter setting, but the vertex coordinates of the polygon area are set in the cords.

Differences between HTML and XHTML

In HTML, the < area > element does not need an end tag.

But in XHTML, the < area > element must be closed properly.

Required attribute

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

attribute value describe DTD
alt text Specify alternate text for a region STF

optional attribute

attribute value describe DTD
coords coordinate Specifies the coordinates of an area STF
href URL Specifies the link target for 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
Indicate where to open the new page TF

Core attributes

The < area > tag supports the following core attributes:

attribute value describe DTD
accesskey character Set keyboard shortcuts to access elements STF
class Class name Indicates the class name of the element STF
dir rtl
ltr
Specifies the text direction of the content in the element STF
id id Indicates the unique ID of the element STF
lang Language code Specifies the language code for the element content STF
style Style definition Specifies the inline style of the element STF
tabindex number Specifies the tab order of the elements STF
title text Specifies the prompt text for the element STF
xml:lang Language code The language code that specifies the content of an element in an XHTML document STF

More about core attributes.


Event properties

The < area > tag supports the following event attributes:

attribute value describe DTD
onblur script Executes the script when the element loses focus STF
onclick script Execute the script when you click the mouse (left and right) within the element area STF
ondblclick script Execute the script when you double-click the mouse in the element area, regardless of the left and right keys STF
onfocus script Executes the script when the element gets focus STF
onmousedown script Executes the script when the mouse button is pressed in the element area, regardless of the 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 Execute the script when you release the mouse button in the element area, regardless of the left and right keys STF
onkeydown script Execute script when a key is pressed STF
onkeypress script Execute the script when a key is pressed and released STF
onkeyup script Execute script when a key is released STF