map+area标签

Posted myErebos

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了map+area标签相关的知识,希望对你有一定的参考价值。

map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
例:要实现一幅地图上鼠标点击或者悬停在某个区域,可以显示出该区域的相关介绍,就需要
这样的map+area标签的组合
<img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以我们需要同时向 <map> 添加 id 和 name 两个属性。


area标签中的属性:1.shape:定义该区域的形状
2.coords:可点击区域(对鼠标敏感区域)的坐标
3.href:定义该区域的URL即类似于a标签的用法提供链接
4.alt类似于img里的alt定义该区域的替换文本
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>map和area标签</title>
 6 </head>
 7 <body>
 8 
 9 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
10 
11 <map name="planetmap" id="planetmap">
12     <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
13     <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
14     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
15  
16 </map>
17 </body>
18 </html>

 

以上是关于map+area标签的主要内容,如果未能解决你的问题,请参考以下文章

HTML map标签area 属性,当鼠标移动到area上面的时候,对应的区域边框的的变大,前变色怎么办?谢谢啊

Map的area属性标签鼠标Hover可以给area加背景吗

HTML5中map标签的使用 area标签中的coords怎么可以做到自适应

使用area标签模仿a标签

map&area标签实现图片热点区域点击

map&area标签实现图片热点区域点击