HTML img map

最新推荐文章于 2024-06-22 09:41:11 发布
最新推荐文章于 2024-06-22 09:41:11 发布
阅读量247 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41472891/article/details/112982125
版权

回到目录

例1：实现效果，点击图片指定的矩形区域，跳转指定路径。
使用Dreamweaver框选区域，生成代码。
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
</head>
	
<body>
	<img src="鸣人.jpg" width="200" usemap="#Map" ismap>
    <map name="Map">
      <area shape="rect" coords="129,41,181,81" href="http://www.baidu.com" target="_blank" alt="百度">
    </map>
    </img>
</body>
</html>
Ranx3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html map 标签使用
06-27
通常情况下，`<map>`标签会配合`<img>`标签一起使用，其中`<img>`标签的`usemap`属性值应与`<map>`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `<map>`标签的基本结构如下： ```html <img src="image....
imgmap_2.2_108
06-14
imgmap 2.2.108 是一个基于JavaScript的开源库，主要用于在HTML图像上创建交互式的区域映射。这个版本的发布标志着软件在功能和性能上的进一步提升。"imgmap"这个名字来源于"image map"，在网页设计中，它允许用户将...
HTML中map标签与area标签
m0_54606980的博客
10-23 882
map标签 area标签
html map标签详解
qq_35301644的博客
12-11 2723
map标签的用途： 是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。 因为map标签是与img标签绑定使用的，所以我们需要给map标签添加ID和name属性，让img标签中的usemap属性引用map标签中的id或者name属性（由于浏览器的不同，usemap属性接收二者之一的值，所以通常name和id属性二者都写，值相同），并配合area标签进行...
发现了什么宝藏？— 强力图片映射(Image Map)插件深度探索！
gitblog_00056的博客
06-22 240
???? 发现了什么宝藏？— 强力图片映射(Image Map)插件深度探索！ 项目地址:https://gitcode.com/clarketm/image-map 在互联网的浩瀚海洋中，偶尔会发现一些既实用又新颖的技术工具，今天要为大家揭开的正是这样一颗璀璨明珠——Image-Map。这是一款纯JavaScript打造的图片映射插件，它不仅响应式设计友好，还能在图像或视口变化时自动重新渲染。无论你是...
HTML 图片热区（img usemap）
司马懿的西山居
02-13 1万+
<img> element ‘s attribute: usemapMDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img The partial URL (starting with ‘#’) of an image map associated with the element. Usage note:
HTML 中image map使用
我的一亩三分田
04-25 2822
在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：        注:所有的坐标都是相对于图片左上角的 其中，坐标coords对各个shape的解释如下： shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right 即，当shape是矩形时，coo
HTML-图像的使用(img标签和map标签的使用)
qiutiandepaomo的博客
11-29 1939
图像标签是空标签，只包含属性，并且没有闭合标签。 img标签的属性介绍： ---src：指定要显示的图片的URL地址。
html -- map标签
fupo
12-23 2502
shape 形状 1. 矩形 rect shape=“rect” coords=“x1,y1,x2,y2” 第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标。“0,0”是图像左上角的坐标。 <area shape="rect" coords="10,50,30,60" href="up" alt="上"> </area> coords="10,50,30,60" 10,50：顶点（左上角）xy坐标 30,60: 对角（右下角）xy坐标 2. 圆形 circle
HTML图片热区map area的用法
Jana Jing的分享
12-15 4906
map标签 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name属性（取决于浏览器），所以我们应同时向map标签添加id和name属性。 注释：<img>标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。 示例 我们想在下面一张图实现九个热点区域，不切图，就使用m...
HTML map元素
歪脖先生的博客
04-10 1794
map元素使用 map元素，可以定义一个图像映射。图像映射是指把一幅图像划分为多个区域（即热点区域），每个热点区域对应一个超级链接，当用户点击热点区域，会自动跳转到预先设定好的链接地址。创建一个图像映射，需要 img、map、area 三种标签配合完成：首先，使用 img 元素定义一幅图像，并通过 src 属性定义图像的URL，通过 usemap 属性定义要选择的图像映射名称，以建立图像与图像映射...
HTML标签<img><map><area>
指尖岁月，“码”的人生
09-24 987
align属性设置图片与同行的文字的位置（在文本中）align相对于整个段落，（在段落中） (重点）    在img中可以定义中含有useMap属性可以跳转到Map标签                 注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。在 HTML 中， 没有结束标签。 注释：中的 usemap 属性可引用 中的
HTML系列之图像标签img
热门推荐
老__L的博客
10-24 3万+
本文主要介绍 img 标签。 将一份图像嵌入文档。没有基线（baseline）;根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的；在高分辨率设备上， srcset 将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项；alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。
HTML的MAP设计
11-07
<img src="image.jpg" usemap="#mapname" alt="description"> <map name="mapname"> <!-- 可以有多个area元素 --> </map> ``` 在上面的例子中，`<img>`标签的`usemap`属性引用了`<map>`的`name`属性，这样就能将...
HTML map标签
03-19
<img src="city_map.gif" usemap="#cityMap"> <map name="cityMap"> ,10,50,50" href="http://www.beijing.com" alt="北京"> ,100,30" href="http://www.shanghai.com" alt="上海"> ,50,180,80,140,120,100,80...
map
03-06
在IT行业中，`map`这个概念广泛应用于各种编程语言和数据结构中，特别是在HTML和JavaScript中。本篇文章将深入探讨`map`在HTML和JavaScript中的应用及其相关知识点。 首先，让我们从HTML的角度出发。在HTML5中，`...
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
b278视频及游戏管理平台-springboot+vue.zip（可运行源码+sql文件+）
07-26
视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
大模型应用-为Ollma开发的简单的HTML网页UI应用-附项目源码-优质项目实战.zip
最新发布
07-26
大模型应用_为Ollma开发的简单的HTML网页UI应用_附项目源码_优质项目实战
vue img map
07-28
要在Vue.js中使用`<img>`标签，并为图像添加链接（使用`<map>`标签），可以按照以下步骤进行操作： 1. 在Vue组件中，使用`<img>`标签来显示图像，可以通过`src`属性指定图像的URL。 ```html <img :src=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ranx3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值