area 元素总是嵌套在 <map> 标签中。本文重点给大家介绍html area标签的相关知识,需要的朋友参考下吧

<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。

area 元素总是嵌套在 <map> 标签中。

注:<img> 标签中的 usemap 属性与 <map>  元素 name 属性相关联,创建图像与映射之间的联系。<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以我们需要同时向 <map> 添加 id 和 name 两个属性。

属性值:

href : 点击区域跳转的链接。alt : 图片无法正常显示时提示的信息。

shape & coords:

1、距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

2、圆形:(圆心坐标为(X1,y1),半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
 

 <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

总结

以上所述是小编给大家介绍的详解 html area标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
得物App向湖北捐赠100万元 用于采购医疗物资

得物App向湖北捐赠100

得物App(原毒App)今日宣布,先期向湖北省红十字基金会捐赠
水滴协同基金会筹款500万防控疫情 完成后另捐50万

水滴协同基金会筹款50

新型肺炎疫情引起全国关注,水滴公司协同多家公益基金会
苹果与博通签订两份合作协议 后者有望赚150亿美元

苹果与博通签订两份合

博通周四下午披露,与苹果公司达成了价值150亿美元的新
苹果申请自动驾驶汽车专利 Siri或成你的私人司机

苹果申请自动驾驶汽车

苹果公司想申请一项新技术的专利,这项技术可以让你使用
顺丰宣布捐助2000万元 用于抗击疫情

顺丰宣布捐助2000万元

顺丰宣布将捐助2000万元人民币,以帮助湖北省抗击疫情。
驰援湖北 好未来设立1亿元抗击疫情专项基金

驰援湖北 好未来设立1

新型肺炎疫情引起全国关注,好未来教育集团决定设立1亿
最新文章
html浮动提示框功能的实现代码

html浮动提示框功能的

这篇文章主要介绍了html浮动提示框功能的实现代码,需
详解HTML中的图片标签的用法

详解HTML中的图片标签

这篇文章主要介绍了详解HTML中的图片标签的用法,本文
使用html-webpack-plugin'入再内存中生成 html 页面插件

使用html-webpack-plu

这篇文章主要介绍了使用html-webpack-plugin'入再内
HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

HTML实现2列布局(左侧

这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧
Html读取本地文件夹下图片并显示的示例代码

Html读取本地文件夹下

这篇文章主要介绍了Html读取本地文件夹下图片并显示的
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介