html图像映射img map area

最新推荐文章于 2023-09-04 16:16:27 发布
最新推荐文章于 2023-09-04 16:16:27 发布
阅读量509 收藏
点赞数
文章标签： html img map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26325251/article/details/81003438
版权

1.img 属性 src  alt

eg: <img src="url" alt="some_text">

url：图片地址链接。alt :预备可替换文本（用于图片加载较慢，或者防止图片出错时加载文字出来）。

一个简单的图像映射的例子：点击上方图片位置，在下方iframe框中显示对应小图片


<html>
<head>
    <title>图像映射练习</title>
    <meta charset="utf-8">
</head>
    <body>



            <img src="images/cc_0009.png " width="512px" height="512px" alt="one" usemap="two">
         <map name="two">
             <area  shape="rect" coords="39px,68px,179px,202px" alt="two" href="images/cc_0000.png" target="iframe_a">
             <area  shape="rect" coords="179px,68px,328px,202px" alt="three" href="images/cc_0001.png" target="iframe_a">
             <area  shape="rect" coords="328px,68px,468,202px" alt="four" href="images/cc_0002.png" target="iframe_a">
             <area  shape="rect" coords="39px,202px,179px,350px" alt="five" href="images/cc_0003.png" target="iframe_a">
             <area  shape="rect" coords="179px,202px,328x,350px" alt="six" href="images/cc_0004.png" target="iframe_a">
             <area  shape="rect" coords="328px,202px,468px,350px" alt="seven" href="images/cc_0005.png" target="iframe_a">
             <area  shape="rect" coords="39px,350px,179px,500px" alt="eight" href="images/cc_0006.png" target="iframe_a">
             <area  shape="rect" coords="179px,350px,328px,500px" alt="nine" href="images/cc_0007.png" target="iframe_a">
             <area  shape="rect" coords="328px,350px,468px,500px" alt="nine" href="images/cc_0008.png" target="iframe_a">

         </map>
           <p>    我不菜呀，我只是技术差那么一点点</p>

        <iframe src="images/cc_0000.png " name="iframe_a"style="margin-left: 50px">

        </iframe>
    </body>
</html>

shape(形状)：rect (矩形）circle(圆形） 多边形（poly)

coords 坐标：rect（x1,y1,x2,y2)左上坐标x1,y1，右下坐x2,y2.  circle(x,y,radius) 原点坐标半径  poly(x1,y1,x2,y2...xn,yn)

target :控制href 链接显示到哪里，其他属性：_blank 显示到一个新的页面

代码和图片压缩包链接：

https://pan.baidu.com/s/1-6GX6zNUxodhSWzSMjcqSA

Carrie005
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中map热点area的使用全部代码和效果，兼容所有浏览器
03-05
通过以上方法，你可以创建出兼容所有浏览器的HTML图像映射，利用`<map>`和`<area>`标签为用户提供交互式的图像体验。在实际应用中，可以根据需要调整`coords`和`shape`，以适应任何复杂的图像布局。
HTML-图像的使用(img标签和map标签的使用)
qiutiandepaomo的博客
11-29 1950
图像标签是空标签，只包含属性，并且没有闭合标签。 img标签的属性介绍： ---src：指定要显示的图片的URL地址。
HTML img 图像映射 map
海胆的博客
06-03 374
<img src="图片地址" usemap="#mapname" alt="" /> <map name="mapname"> <area shape="circle / rect" coords="x,y,14 / x1,y1,x2,y2" href ="目标地址" target ="_blank" alt="" /> <area /> </map>
（22）HTML标签详解之<img><map><area>
yangli_world的博客
07-27 1835
HTML标签详解之    在任何一个网页中图片都是很常见的，有的作为背景图片，有的是直接插入在网页中作为展示或者链接。 标签的四大属性width、height、src 和 alt 。在一个图文混排的网页中，需要注意图片与周围文字的排布情况。以往都是使用align属性来设置如何根据周围的文本来排列该图像，但是建议使用float属性来控制图片与文字的排布。         默认情况下，图片后如果
HTML中map标签与area标签
m0_54606980的博客
10-23 909
map标签 area标签
HTML ＜map＞ 标签的使用
最新发布
m0_72759446的博客
09-04 2764
【代码】HTML ＜map＞ 标签的使用。
map_area
03-30
"map_area"这个主题可能是指HTML中的`<map>`和`<area>`元素，它们是HTML图像映射（Image Maps）的一部分，用于定义图像上的可点击区域。 HTML图像映射允许我们在一个图像上创建多个交互式链接区域。这在我们希望一...
详解 html area标签
09-22
`<map>` 的 `name` 属性用于关联到`<img>` 标签的 `usemap` 属性，创建图像与映射之间的联系。同时，为了兼容性，`<map>` 还可以设置 `id` 属性，两者都可以被 `usemap` 引用，但浏览器可能会优先使用 `id`。 示例...
html map 标签使用
06-27
`<map>`标签用于定义一个客户端图像映射，该映射由多个`<area>`标签组成，每个`<area>`标签定义了图像上的一个可点击区域。通常情况下，`<map>`标签会配合`<img>`标签一起使用，其中`<img>`标签的`usemap`属性值应与...
imgmap_2.2_108
06-14
imgmap 2.2.108 是一个基于JavaScript的开源库，主要用于在HTML图像上创建交互式的区域映射。这个版本的发布标志着软件在功能和性能上的进一步提升。"imgmap"这个名字来源于"image map"，在网页设计中，它允许用户将...
HTML 中image map使用
我的一亩三分田
04-25 2849
在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：        注:所有的坐标都是相对于图片左上角的 其中，坐标coords对各个shape的解释如下： shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right 即，当shape是矩形时，coo
【html】area/map/img的使用
qq_39532595的博客
11-25 519
今天翻MDN，发现一个area标签，重来没有用过。今天了解了一下。 area是单标签 area是用来画图形的，可以是圆形、矩形、和多边形 属性（重点加粗）： cords是给所画的图片设定坐标值 download 是链接资源下载的 除去网址信息 herf是area区域的url hreflang 是资源的语言 media 指明链接资源的媒体类型 nohref 指明是没有超链接的 直接 rel 表...
html中area标签高亮和添加背景颜色
a57321563的博客
05-28 6829
Area标签高亮Map area标签的基础知识Map area的具体用法Area标签设置样式的问题使用jquery.maphilight.js库改变area背景效果图片展示基础使用方法附上github的实例，讲的比我清楚结束 Map area标签的基础知识 公司要求写一个demo案例，需要用到图片热区，此时便想到了html中的map+area功能，该功能可以实现图片热区的添加。具体的Map area百科 Map area的具体用法 https://www.cnblogs.com/mq0036/p/33373
HTML图片热区map area的用法
Jana Jing的分享
12-15 4968
map标签 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name属性（取决于浏览器），所以我们应同时向map标签添加id和name属性。 注释：<img>标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。 示例 我们想在下面一张图实现九个热点区域，不切图，就使用m...
html map area 背景色,详解 html area标签
weixin_36328839的博客
07-01 669
原标题：详解 html area标签 标签定义图像映射中的区域(注：图像映射指得是带有可点击区域的图像)。area 元素总是嵌套在 标签中。注： 标签中的 usemap 属性与 元素 name 属性相关联，创建图像与映射之间的联系。 中的 usemap 属性可引用 中的 id 或 name 属性(由浏览器决定)，所以我们需要同时向 添加 id 和 name 两个属性。 属性值：href ...
<html>img、map、area
大草包的博客
05-13 421
<img src/alt/height/width/border align="top/left/right/middle/bottom" hspace="定义图像左、右的空白。" vspace="定义图像顶、底的空白。" ismap="将图像定义为服务器端图像映射。" longbesc="指向
html map标签详解
qq_35301644的博客
12-11 2823
map标签的用途： 是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。 因为map标签是与img标签绑定使用的，所以我们需要给map标签添加ID和name属性，让img标签中的usemap属性引用map标签中的id或者name属性（由于浏览器的不同，usemap属性接收二者之一的值，所以通常name和id属性二者都写，值相同），并配合area标签进行...
HTML img map
放弃很容易，坚持很难。
01-22 257
img map 标签
HTML图像映射与网页基础
1. **定义图像**: 首先，你需要在HTML文档中插入一个`<img>`标签来引用图像，并使用`usemap`属性指明映射的名称。例如： ```html <img src="URL" usemap="#mapName"> ``` 其中，`URL`是图像的路径，`#mapName`是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值