html中的Map,area标签详解

最新推荐文章于 2022-10-23 17:03:15 发布
最新推荐文章于 2022-10-23 17:03:15 发布
阅读量790 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/biaobiao1217/article/details/39181603
本文详细介绍了如何使用不同的形状来定义特定区域，包括矩形(rect)、多边形(poly)及圆形(circle)。对于每种形状，都给出了coords属性的具体设置方法，如矩形通过左上角和右下角坐标定义，多边形则需列出所有顶点坐标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html中的Map,area标签详解

shqpe属性的设置说明:
1.rect 定义一个矩形区域,coords属性设置值为矩形的左上角,右下角的坐标,各个坐标值之间用逗号分开;
2.poly 定义一个多边形区域, coords属性设置值为多边形各项顶点的坐标值;
3.circle 定义一格圆形区域, coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径.

HTML中area标签详解及用法示例
CbrFullstack的博客
10-02 546
图像映射允许将图像分割为多个可点击的区域，每个区域可以链接到不同的URL或执行特定的JavaScript函数。需要注意的是，图像映射应该与图像一起使用，以便用户可以根据图像上的可点击区域进行导航或执行特定的操作。第二个区域是一个圆形，圆心坐标为(150,150)，半径为50，链接到"http://www.example.com/page2.html"。第二个区域是一个圆形，圆心坐标为(150,150)，半径为50，链接到"http://www.example.com/page2.html"。
html中map热点area的使用
03-03
html中map热点area的使用,获取图片上的热点
记录一则【HTML中图片映射map及area标签的使用】
BigDaruizi的博客
08-09 990
         这几天在做网页的时候，有时候会需要一张图片中的局部产生链接，也就是<map></map>标签，而此标签可以和   <area>标签一起使用，来达到定义图像的映射（图像映射指的是带有可点击区域的图像）。<area>标签和<a>标签的区别不是很大，前者可以定义链接的区域。 几个属性：  shape ：表示点击热点区域的...
map area 标签的使用
weixin_33978044的博客
03-28 206
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>点击太阳或其他行星，注意变化：
html中map标签和area标签的应用
diaota2693的博客
03-17 401
map标签的用途：是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。 因为map标签是与img标签绑定使用的，所以我们需要给map标签添加ID和name属性，让img标签中的usemap属性引用map标签中的id或者name属性（由于浏览器的不同，usemap属性接收二者之一的值，所以通常name和id属性二者都写，值相同），并配合are...
HTML <map> <area>
woshiyangxianjiang的专栏
12-03 351
带有可点击区域的图像映射： &lt;area&gt; 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。 area 元素总是嵌套在 &lt;map&gt; 标签中。 注释：&lt;img&gt; 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。 &lt;img src="planets.jpg" border="0" use...
详解 html area标签
09-22
`<area>` 标签总是作为 `<map>` 标签的子元素出现，而`<map>` 标签则用于定义映射的名称或ID。 1. **`<map>` 标签**：此标签定义了一个图像映射，它可以包含多个`<area>` 子元素。`<map>` 的 `name` 属性用于关联到...
HTML中的map标签使用详解
资源摘要信息:"HTML中的'map'标签主要用于定义客户端图像映射，即通过点击图片的不同部分，可以链接到不同的URL地址。图像映射允许用户通过在图片上的不同区域进行点击来与网页互动。每个图像映射都由一个地图区域和...
html map 标签使用
06-27
`<map>`标签作为HTML中的一个重要组成部分，主要用于定义图像映射，即在图像上创建可点击的区域，并将这些区域链接到不同的URL地址。本文将详细介绍`<map>`标签的基本概念、使用方法及其应用场景。 #### 二、`<map>...
HTML 图像映射：map 标签详解与应用
在HTML中，`map` 标签通常与 `img` 标签配合使用，例如： ```html <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href="venus.html" alt="Venus"/> <area shape="circle" ...
HTML的map-area的使用
dazwxrt0338的博客
05-23 190
使用背景 在把设置图转成页面的时候，时常会遇到这种情况：一张小图片上有好多个可以点击的小图标，按常规的处理方法是把这一个一个的小图切出来，然后每个加个a标签进行跳转，但是这样会非常的浪费时间，而且会增加页面图片的数量，拖慢页面的加载速度，所以下面我们就以这张图片为例，在上面3个小图片上加map跳转。 map-area的使用 在img标签有一个usemap的属性，值为map的id...
HTML中map标签与area标签
m0_54606980的博客
10-23 1029
map标签 area标签
html语言map,HTML中map是什么？
weixin_39640520的博客
06-03 469
map是HTML中的一个标签；map标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。因为img中的usemap属性可引用map中的id或name属性(取决于浏览器)，所以应同时向map添加id和name属性。定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。中的 us...
详细解读html中的Map,area标签
03-28 327
一.定义 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 二.使用 <!--定义一个图像他的边框为0(border)usemap(指定该图像被用作图像地图)"#mymap"(所使用的图像热点映射名称)--> <imgsrc="logo.gif"border=0usemap="#mymap"> ...
HTML标签 map area的使用
mangrandi的专栏
05-17 785
今天学习CSS时候，突然看到了 。原来点击图片某些区位，就会跳转指定界面是这样实现的。 一、Tips 1、和是配套使用的。总是嵌套在中。 2、 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。 中的 usemap 属性可引用 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 添加  id 和 name 两个
HTML map元素
歪脖先生的博客
04-10 1869
map元素使用 map元素，可以定义一个图像映射。图像映射是指把一幅图像划分为多个区域（即热点区域），每个热点区域对应一个超级链接，当用户点击热点区域，会自动跳转到预先设定好的链接地址。创建一个图像映射，需要 img、map、area 三种标签配合完成：首先，使用 img 元素定义一幅图像，并通过 src 属性定义图像的URL，通过 usemap 属性定义要选择的图像映射名称，以建立图像与图像映射...
【转】HTML中的map标签
qq_38148024的博客
07-05 480
html中的Map,area标签详解 工具   Imagination Image Map Editor 一.定义和用法 定义一个客户端图像映射。图像映射...
html dw map,DW十六 map标签
weixin_30670053的博客
06-26 217
可以在一张图片中定义一些热点下面的示例 定义了 一个矩形 和 圆形的 热点view plaincopy to clipboardprint?mce_shape="rect" coords="75,75,99,99" mce_coords="75,75,99,99"nohref="nohref">mce_shape="circ" coords="50,50,25" mce_coords="50...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值