HTML标签 map area的使用

最新推荐文章于 2022-10-23 17:03:15 发布

mangrandi

最新推荐文章于 2022-10-23 17:03:15 发布

阅读量676

点赞数

文章标签： html

本文链接：https://blog.csdn.net/mangrandi/article/details/51437989

版权

今天学习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>

mangrandi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML标签 map area的使用

今天学习CSS时候，突然看到了。原来点击图片某些区位，就会跳转指定界面是这样实现的。一、Tips1、和是配套使用的。总是嵌套在中。2、标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。中的 usemap 属性可引用中的 id 或 name 属性（由浏览器决定），所以我们需要同时向添加 id 和 name 两个
复制链接

扫一扫