百科狗-知识改变命运!
--

- 图片上热点区域 - html5 图片和多媒体

乐乐1年前 (2023-11-21)阅读数 13#技术干货
文章标签属性

HTML 元素在图片上定义一个热点区域,可以关联一个超链接。元素仅在元素内部使用。

浏览器支持

所有主流浏览器都支持标签。

例子

  shape="circle" coords="200,250,25" href="another.htm" />  shape="default" nohref />

标签定义及使用说明

  • 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。
  • 元素始终嵌套在标签内部。
内容分类流式内容元素,短语内容
允许的内容它是一个空的元素不允许嵌套任何子元素或者文本。
标签省略能允许有开始标签不允许有结束标签。
允许的父元素元素必须拥有一个元素祖先元素,但不一定是直接的父元素。
DOM接口HTMLAreaElement

属性

该元素包括全局属性。

  • alt在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择(译者注:就是字和图片表达一个意思)。在HTML4中,这个属性时必需的,但是可以是一个空的串("")。在HTML5中,这个属性只有在href属性被使用的时候才是必需的。
  • coords给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。对于矩形或长方形,这个coords值为两个X,Y对:左上、右下。对于圆形,这个值是x,y,r,这里的x,y是一对确定圆的中心的坐标而r则表示的是半径值.。对于多边和多边形,这个值是用x,y对表示的多边形的每一个点:x1,y1,x2,y2,x3,y3,等等。HTML4里,值可能是像素数量或者百分比,区别是不是有%出现; HTML5里,只可能是像素的数量.
  • hrefarea的超链接,值为一个URL. HTML4里,这个值不管是不是有值都要明确指定出来. HTML5里则不需要.
  • target本属性指明了在什么地方显示链接的资源。本属性只能在指明href属性之后使用.HTML4里,这个值是一个frame的链接或者关键字. HTML5里,它是一个浏览器上下文(比如:标签,窗口或者内嵌的frame)的链接或者关键字。值的含义:
    • _self:在当前区域加载链接指向的资源。这个是默认值.
    • _blank:在新的未命名的窗口或者tab里加载超链接资源.
    • _parent:在父级加载超链接资源. HTML4里,是当前frame的父级, HTML5里是当前的浏览器上下文,如果当前环境没有父级,行为和_self一样.
    • _top: HTML4里:将响应加载到完整的原始窗口中,取消所有其他帧。在HTML5中:将响应加载到顶级浏览上下文(也就是说,浏览上下文是当前版本的祖先,并且没有父类)。如果没有父类,这个选项的行为方式与_self相同
  • shape相关联的热点的形状。HTML 5和HTML4的规范定义了值rect,它定义了一个矩形区域;圆圈,它定义了一个圆形区域;多边形,它定义了一个多边形;默认情况下,这表示整个区域超出了任何定义的形状。许多浏览器,特别是Internet Explorer 4和更高版本,支持弧形、多边形和矩形作为形状的有效值;这些值{{Non-standard_inline}}。
  • type该属性指定了用于链接目标的MIME类型的媒体类型。只有当href属性存在时才使用该属性。一般来说,这是严格的咨询信息;然而,在未来,浏览器可能会为多媒体类型添加一个小图标。例如,当类型设置为音频/wav时,浏览器可能会添加一个小的扬声器图标。
  • downloadHTML5新增
    这个属性如果存在的话,表明作者想把超链接用于下载一个资源。请查看获得关于download属性的完整描述。
  • hreflangHTML5新增
    指明链接资源的语言类型,值的范围参考BCP47.这个属性只能在指明href属性之后使用.
  • nameTHML5中废弃
    为可点击区域定义一个名字以使旧浏览器解析。
  • mediaHTML5新增
    指明链接资源的媒体类型,例:print and screen。如果此属性省略,默认全部。仅在href属性存在情况下使用。
  • relHTML5新增
    对于包含href属性的锚,该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系,默认的关系是无效的。只有当href属性是presen时才使用该属性
  • accesskeyTHML5中废弃
    为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下,按ALT或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自HTML5以来是全局性的。
  • nohrefTHML5中废弃
    指明此区域没有超链接。在中必须存在nohref或者href。
  • tabindexTHML5中废弃
    用于指定浏览器tab键获取焦点的顺序。在html5中是全局属性。

属性

属性描述
alttext规定区域的替代文本。如果使用 href 属性,则该属性是必需的。
coordscoordinates规定区域的坐标。
hrefURL规定区域的目标 URL。
hreflang HTML5新增language_code规定目标 URL 的语言。
media HTML5新增media query规定目标 URL 是为何种媒介/设备优化的。默认:all。
nohrefvalueHTML5 不支持。规定没有相关链接的区域。
rel HTML5新增alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
规定当前文档与目标 URL 之间的关系。
shapedefault
rect
circle
poly
规定区域的形状。
target_blank
_parent
_self
_top
framename
规定在何处打开目标 URL。
type HTML5新增MIME_type规定目标 URL 的 MIME 类型。
注:MIME = Multipurpose Internet Mail Extensions。

HTML 4.01 与 HTML5之间的差异

HTML5 提供了一些新属性,同时不再支持 HTML 4.01 中的某些属性。

HTML 与 XHTML 之间的差异

在 HTML 中,标签没有结束标签。

 - 图片上热点区域 - html5 图片和多媒体

在 XHTML 中,标签必须正确地关闭。

全局属性

标签支持HTML 的全局属性。

事件属性

标签支持HTML 的事件属性。

实例

带有可点击区域的图像映射:

 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)