


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

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
2. All hotspot areas in the same "image map" must be within the scope of the image map, that is, all < area> tags must be between
3. The coordinate format set by the cords parameter in the tag must be the same as the shape parameter setting. The area shape is matched to avoid the phenomenon that the rectangular area of effect is set in the shape parameter, but the vertex coordinates of the polygon area are set in the cords.
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.
属性 | 值 | 描述 | 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
|
Specify the shape of the area | STF | ||||||||||||||||||||||||
target | _blank_parent_self_top | Indicate where to open the new page | TF |
Core Attributes
Thetag 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
Thetag 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 |

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
