分享一个在 W3School 学的小案例,嘻嘻嘻~
该例子主要用到了Html中的 < map > 标签和 < area > 标签,下面我们先来了解一下这两个标签
< 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>