<map>标签与<area>标签实例

目录

      • 前言
      • 运行效果
      • 标签详解
      • 代码展示

前言

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

运行效果

<map>标签与<area>标签实例_第1张图片

标签详解

该例子主要用到了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>venustitle>
	head>
	<body>
		<img src="img/eg_venus.gif" >
	body>
html>

mercur.html(该页面放的是水星的图片)

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

sun.html(该页面放的是太阳的图片)

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

你可能感兴趣的:(前端,html,前端)