map+area标签

map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像，配合area标签    area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域    例：要实现一幅地图上鼠标点击或者悬停在某个区域，可以显示出该区域的相关介绍，就需要    这样的map+area标签的组合

<img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。

area标签中的属性：1.shape：定义该区域的形状                      2.coords：可点击区域（对鼠标敏感区域）的坐标                      3.href:定义该区域的URL即类似于a标签的用法提供链接                      4.alt类似于img里的alt定义该区域的替换文本

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>map和area标签</title>
 6 </head>
 7 <body>
 8
 9 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
10
11 <map name="planetmap" id="planetmap">
12     <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
13     <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
14     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
15
16 </map>
17 </body>
18 </html>

转载于:https://www.cnblogs.com/myErebos/p/8588220.html

map+area标签相关推荐

html中map标签的用法,HTML中的map和area标签
1. 标签介绍: (1)map标签: 该标签是指图片的映射,也就是说一张可以点击的图片的映射: 属性介绍: <1> id: 中的 usemap 属性可引用中的 id 或 name 属性( ...
同一个html页面中两个area,HTML中的map和area标签
1. 标签介绍: (1)map标签: 该标签是指图片的映射,也就是说一张可以点击的图片的映射: 属性介绍: <1> id: 中的 usemap 属性可引用中的 id 或 name 属性( ...
HTML图片热区map area的用法(转)
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: 1 & ...
HTML图片热区map area的用法整理
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: 1 & ...
java web热区链接_HTML图片热区map area的用法
标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: href＝url alt＝te ...
HTML图片热区map area的用法
HTML图片热区map area的用法 <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设 ...
map area 鼠标跟随
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
＜map＞标签与＜area＞标签实例
目录前言运行效果标签详解代码展示前言分享一个在 W3School 学的小案例,嘻嘻嘻~
html图像区域映射菜鸟,HTML area 标签 | w3cschool菜鸟教程
HTML 标签实例带有可点击区域的图像映射: usemap="#planetmap"> 尝试一下 » 浏览器支持所有主流浏览器都支持标签. 标签定义及使用说明标签定 ...

map+area标签

map+area标签相关推荐

最新文章

热门文章