＜map＞标签与＜area＞标签实例

香蕉卟NaNa

已于 2023-02-24 16:09:25 修改

阅读量979

点赞数 14

分类专栏：前端文章标签： html 前端

于 2022-05-22 22:55:43 首次发布

本文链接：https://blog.csdn.net/weixin_48650082/article/details/124914694

版权

前端专栏收录该内容

10 篇文章 4 订阅

订阅专栏

前言

分享一个在 W3School 学的小案例，嘻嘻嘻~😁

运行效果

map标签例子

标签详解

该例子主要用到了Html中的 < map > 标签和 < area > 标签，下面我们先来了解一下这两个标签

< area > 标签总是嵌套在 < map > 标签中。
< area > 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
< img > 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。
< img > 中的 usemap 属性可引用 < map > 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 < map > 添加 id 和 name 属性。

< area > 在 HTML 与 XHTML 之间的差异
在 HTML 中，< area > 没有结束标签。
在 XHTML 中，< area > 必须正确地关闭。

< area >标签中的可选属性有

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。
download	filename	指定当用户单击超链接时将下载目标。
href	URL	定义此区域的目标 URL。
hreflang	language_code	规定区域中目标 URL 的语言。
media	media query	规定目标 URL 优化的媒体/设备。
referrepolicy	no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、same-origin、strict-origin-when-cross-origin、unsafe-url	规定当用户单击超链接时要发送哪些引荐来源信息。
rel	alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag	规定区域中目标 URL 的语言。
nohref	nohref	从图像映射排除某个区域。
shape	default、rect、circ、poly	定义区域的形状。
target	_blank、_parent、_self、_top	规定在何处打开 href 属性指定的目标 URL。
type	media_type	规定目标 URL 的 Internet 媒体类型。

其实这个例子主要是利用< area >标签中的 coords 属性对图片中的某区域进行定位，然后鼠标点击跳转到相应的 URL。

代码展示

主代码：

<!DOCTYPE html>
<html>
<body>

<p>点击图片上的星球，可以把它们放大哦~</p>

<img
src="img/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="sun.html"
target ="_blank"
alt="Sun" />

</map>

</body>
</html>

venus.html（该页面放的是金星的图片）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>venus</title>
	</head>
	<body>
		<img src="img/eg_venus.gif" >
	</body>
</html>

mercur.html（该页面放的是水星的图片）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mercur</title>
	</head>
	<body>
		<img src="img/eg_merglobe.gif" >
	</body>
</html>

sun.html（该页面放的是太阳的图片）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sun</title>
	</head>
	<body>
		<img src="img/eg_sun.gif" >
	</body>
</html>

香蕉卟NaNa

关注

14
点赞
踩
15

收藏

觉得还不错? 一键收藏
20
评论
＜map＞标签与＜area＞标签实例

分享一个很久之前在 W3school 上学的小案例，嘻嘻嘻~😁我们先来看看效果吧该例子主要用到了Html中的 < map > 标签和 < area > 标签area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。< area > 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。< img > 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。< i.
复制链接

扫一扫