Web速查-索引

Alt text

定义

<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。

area 元素总是嵌套在 <map> 标签中。

属性

属性 描述
alt text 定义此区域的替换文本。
coords coordinates 定义可点击区域(对鼠标敏感的区域)的坐标。
download filename 该属性(如果存在)表明开发者想把超链接用于下载一个资源。
href URL 定义此区域的目标 URL。
hreflang language_code 指示链接资源的语言。仅当存在 **href ** 属性时才使用此属性。
media media query 链接资源的媒体提示,例如 print and screen。如果省略,则默认为 all。仅当存在** href** 属性时才使用此属性。
rel alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag 对于包含 href 属性的锚点,此属性指定目标对象与链接对象的关系。仅当存在 href 属性时才使用此属性。
shape default、rect、circ、poly 定义区域的形状。
target _blank、_parent、_self、_top 规定在何处打开 href 属性指定的目标 URL。
type media_type 该属性指定了用于链接目标的MIME类型的媒体类型。

实例

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<body>
<p>请点击图像上F和C的最下末端圆点</p>
<img
src="../img/logo.png"
border="0" usemap="#fishc"
alt="Planets" />
<map name="fishc" id="fishc">
<!--中心x,中心y,半径-->
<area
shape="circle"
coords="109,63,10"
href ="area1.html"
target ="_blank"
alt="F" />
<!--左上角坐标x,左上角坐标y,横轴,纵轴-->
<area
shape="rect"
coords="0,0,66 ,77"
href ="area2.html"
target ="_blank"
alt="Python" />
</map>
<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
Planets F Python

注释:img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img
src="http://fishc.oss-cn-hangzhou.aliyuncs.com/AD/time-management-1966421_960_720.png"
border="0" usemap="#fishc"
alt="Python" />
</body>
</html>
Python


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img
src="http://fishc.oss-cn-hangzhou.aliyuncs.com/AD/web.png"
border="0" usemap="#fishc"
alt="F" />
</body>
</html>
F

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
1.0 1.0 1.0 1.0