您的位置：首页 > Web前端 > HTML

HTML标签 map area的使用

2016-05-17 17:57 435 查看

今天学习CSS时候，突然看到了<map> <area>。原来点击图片某些区位，就会跳转指定界面是这样实现的。

一、Tips

1、<map>和<area>是配套使用的。<area>总是嵌套在<map>中。

2、<img> 标签中的
usemap 属性与 map 元素
name 属性相关联，创建图像与映射之间的联系。<img> 中的
usemap 属性可引用 <map> 中的
id或
name 属性（由浏览器决定），所以我们需要同时向 <map> 添加

id 和 name 两个属性。

3、shape是图片上被关联区域的形状。值有default,rect,circ,poly。coords意思是坐标，搭配着shape选定的形状使用。

如果rect，coords=A,b,c,d。a，b是矩形左上角坐标，c，d是右下角坐标。

如果circ，coords=a,b,c 。a，b是圆心坐标。c是半径

4、想看图片坐标值的话，windows上直接点击图片编辑就能有这类功能。

二、代码

这是我自己实践的。

<img src="./images/footer.jpg" usemap="#mapfooter">
<map name="mapfooter" id="mapfooter">
<area shape="rect" href="http://www.sina.com" coords="16,57,112,67" alt="To Sina"></area>
<area shape="rect" href="http://www.sohu.com" coords="123,57,190,67" alt="To Sohu"></area>
<area shape="rect" href="http://www.baidu.com" coords="17,74,100,84" alt="To Baidu"></area>
<area shape="rect" href="http://www.qq.com" coords="115,76,195,84" alt="To Tencent"></area>
<area shape="rect" href="http://www.xiaomi.com" coords="18,94,72,106" alt="To Xiaomi"></area>
</map>

以下是网上找的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML area与map 标签示例</title>
</head>
<body>
<img src="/images/html_table.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="35,29,135,99" href="/xhtml/" title="矩形点击区域-html教程" />
<area shape="circle" coords="243,78,44" href="/css/" title="圆形点击区域-css教程" />
<area shape="poly" coords="120,137,195,154,135,207" href="/webbuild/" title="三角形点击区域-网站建设与制作教程" />
</map>
<p>鼠标移动到上面图片中的区域(区域左边在下面可以找到)，可以显示点击区域的说明。</p>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航