html map area 标签

map :定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

 

       属性:

             name: 为 image-map 规定的名称。

                      注释: <img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。

             id     : 为 map 标签定义唯一的名称。

 

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

 

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

       属性:

             alt(必须):定义此区域的替换文本。alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。

             shape   :定义区域的形状。

             coords  :坐标值 定义可点击区域(对鼠标敏感的区域)的坐标。 coords 属性规定区域的 x 和 y 坐标。

                         coords 属性与shape 属性配合使用,来规定区域的尺寸、形状和位置。 图像左上角的坐标是 "0,0"。

                                圆形(circ)    :shape="circle",coords="x,y,z"

                                              这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),z 是以像素为单位的圆形半径。

                                多边形(poly) :shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."

                                              每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。

                                              定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。

                                              多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

                                矩形:shape="rectangle",coords="x1,y1,x2,y2"

                                              第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。

                                              请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

             href     :URL 定义此区域的目标 URL。规定在何处打开 href 属性指定的目标 URL。

eg:

    <img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

    <map name="planetmap">
             <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />

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

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

    </map>

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: area 标签用于定义图像映射中的可点击区域。它必须与 map 标签一起使用,map 标签定义图像映射。area 标签有以下属性:href、alt、coords、shape、target。其中,href 属性指定链接的目标 URL,alt 属性指定替代文本,coords 属性指定区域的坐标,shape 属性指定区域的形状,target 属性指定链接的目标窗口。 ### 回答2: area标签HTML中的一个标签,用于定义图像映射(image map)。图像映射是将图像分成多个可点击的区域,每个区域可以链接到不同的URL或执行不同的操作。 area标签通常与map标签配合使用。map标签用于定义图像映射的区域,而area标签用于定义具体的可点击区域。area标签有以下几个重要属性: - shape属性:指定可点击区域的形状,有以下几种取值: - rect:矩形 - circle:圆形 - poly:多边形 - coords属性:指定可点击区域的坐标,具体取值根据不同的形状而定。对于矩形和圆形,坐标值为左上角和中心点的x和y坐标;对于多边形,坐标值为各个顶点的x和y坐标,用逗号分隔。 - href属性:指定可点击区域所链接的URL或执行的操作。对于链接,可以使用相对路径或绝对路径;对于执行操作,可以使用JavaScript代码。 使用area标签时,要先在map标签中定义多个area标签,然后将map标签与对应的图像绑定。通过设置多个area标签,可以实现将图像分成不同的可点击区域。在图像被点击时,浏览器会根据坐标和形状属性判断用户点击的是哪个区域,然后根据对应的href属性进行相应的处理。 area标签的使用场景包括但不限于: - 在地图上将不同地区或城市划分为可点击区域,点击区域后进一步展示该地区的信息; - 在导航栏中使用图像作为按钮,点击不同部分跳转到不同页面; - 在产品图片上将不同部分设置为可点击区域,点击跳转到对应的产品详情页面。 总之,area标签是用于定义图像映射的标签,可以将图像分成多个可点击的区域,为用户提供更好的交互体验。 ### 回答3: area标签HTML中用于定义图像映射区域的一个元素。图像映射是指在一个图片上定义多个可点击的区域,每个区域可以链接到不同的URL或执行不同的JavaScript函数。 area标签使用map元素来指定所属的图像映射。一张图像可以有多个area标签,每个标签定义一个区域。每个area标签需要以下几个属性: - shape:指定区域的形状,可以是矩形(rect)、圆形(circle)或多边形(poly)。 - coords:指定区域的坐标,根据不同的形状而有所不同。对于矩形来说,需要指定左上角和右下角的坐标;对于圆形来说,需要指定圆心和半径;对于多边形来说,需要指定各个顶点的坐标。 - href:指定链接的目标URL,当用户点击指定区域时,将跳转到这个URL。 - alt:指定当图片无法显示时的替代文本。 除了以上必要的属性,area标签还可以有其他可选的属性,如target(指定链接打开的目标窗口)、download(指定是否下载链接的目标文件)、rel(指定链接与当前文档的关系等)。 例如,我们可以使用以下代码在一张地图上定义两个可点击的区域: ``` <img src="map.png" alt="地图" usemap="#map"> <map name="map"> <area shape="rect" coords="0,0,100,100" href="http://www.example1.com" alt="链接1"> <area shape="circle" coords="150,150,50" href="http://www.example2.com" alt="链接2"> </map> ``` 在上述代码中,我们首先使用img标签来显示地图图片,并在使用该图片的地方指定了一个usemap属性,该属性的值与map元素的name属性相对应。然后,我们使用map标签定义了一个名为"map"的图像映射区域,其中有两个区域,一个是矩形区域,另一个是圆形区域。这两个区域分别链接到了不同的URL,并给每个链接定义了替代文本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值