Introduction to the use of html area image hotspots with a list of related attributes_HTML/Xhtml_Web page production

The

tag is mainly used in image maps. Through this tag, the active area (also known as hotspot) can be set in the image map, so that when the user moves the mouse to the specified active area and clicks, it will automatically link Go to the preset page. Its 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).

means setting the shape of the hotspot to be a circle, the center coordinates of the circle 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.

mark divides the area of ​​action in the image map, so the area of ​​action it divides must be within the area of ​​the image map, so before using the mark to divide the area, HTML must be used Another tag

Copy the code

The code is as follows:

A few points that should be noted when creating the effects introduced in this article:

1. Don’t forget to set the usemap and ismap parameters in the mark, and the parameter value of usemap must be the same as the

属性	值	描述	DTD
alt	文本	为一个区域指定备选文本	STF

Optional attributes

property

value

Description

DTD

coords

Coordinates

Specify the coordinates of an area

STF

href

URL

Specify the link target of a region

STF

nohref

nohref

Indicates that there is no corresponding link in the area

STF

shape

default

属性	值	描述	DTD
coords	坐标	指定一个区域的坐标	STF
href	URL	指定一个区域的链接目标	STF
nohref	nohref	指出区域内没有相应的链接	STF
shape	default rect circle poly	指定区域的形状	STF
target	_blank _parent _self _top	指出在何处打开新页面	TF

rectcirclepoly

Specify the shape of the area

STF

target

_blank_parent_self_top

Indicate where to open the new page

TF

---

Core Attributes

The

tag supports the following core attributes:

属性	值	描述	DTD
accesskey	字符	设置访问元素的键盘快捷键	STF
class	类名	指明元素的类名	STF
dir	rtl ltr	指定元素里内容的文本方向	STF
id	id	指明元素的唯一id	STF
lang	语言代码	指定元素内容的语言代码	STF
style	样式定义	指定元素的内嵌样式	STF
tabindex	数字	指定元素的Tab键顺序	STF
title	文本	指定元素的提示文本	STF
xml:lang	语言代码	在XHTML文档中指定元素内容的语言代码	STF

More information about core properties.

---

Event Properties

The

tag supports the following event attributes:

属性	值	描述	DTD
onblur	脚本	当元素失去焦点时执行脚本	STF
onclick	脚本	在元素区域内单击鼠标（不区分左右键）时执行脚本	STF
ondblclick	脚本	在元素区域内双击鼠标（不区分左右键）时执行脚本	STF
onfocus	脚本	当元素取得焦点时执行脚本	STF
onmousedown	脚本	在元素区域内按下鼠标键（不区分左右键）时执行脚本	STF
onmousemove	脚本	当鼠标指针在元素区域内移动时执行脚本	STF
onmouseout	脚本	当鼠标指针移出元素区域时执行脚本	STF
onmouseover	脚本	当鼠标指针移入元素区域时执行脚本	STF
onmouseup	脚本	在元素区域内松开鼠标键（不区分左右键）时执行脚本	STF
onkeydown	脚本	按下一个键时执行脚本	STF
onkeypress	脚本	按下并松开一个键时执行脚本	STF
onkeyup	脚本	松开一个键时执行脚本	STF