html map 使用

最新推荐文章于 2023-10-09 21:57:49 发布
最新推荐文章于 2023-10-09 21:57:49 发布
阅读量604 收藏
点赞数
文章标签： html class xhtml border div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gracehaohaoxue/article/details/6307182
版权

今天刚做了一个html map 标记的DEMO，贴在此处方便以后使用

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map 使用</title>
<script>
 function Show(divId){
  var ID=document.getElementById(divId);
  ID.style.visibility="visible";
  }
</script>
<style type="text/css">
.showDiv{
 padding-top:100px;
 }
.one{
 position:absolute;
 width:auto;
 z-index:1;
 height:auto;
 right:450px;
 top:90px;
 filter:alpha(opacity=80);
 opacity:0.8;
 visibility:hidden;
  }
.two{position:absolute;
 width:auto;
 z-index:1;
 height:auto;
 left:430px;
 top:130px;
 filter:alpha(opacity=80);
 opacity:0.8;
 visibility:hidden;
 }
.three{
 position:absolute;
 width:auto;
 z-index:1;
 height:auto;
 right:450px;
 top:380px;
 filter:alpha(opacity=80);
 opacity:0.8;
 visibility:hidden;
  }
</style>
</head>
<body>
<div style=" width:400px; height:500px; margin:0px auto">
<div id="oneDiv" class="one"><img src="images/001.gif" /></div>
<div id="twoDiv" class="two"><img src="images/002.gif" /></div>
<div id="threeDiv" class="three"><img src="images/003.gif" /></div>
<div class="showDiv">
<img src="../pic02.png" usemap="#aa" alt="aa" border="0" />
  <map name="aa" id="aa">
    <area shape="circle" coords="212,137,14" nohref="nohref" οnclick="Show('oneDiv')"/>
    <area shape="circle" coords="173,180,14" nohref="nohref" οnclick="Show('twoDiv')"/>
    <area shape="circle" coords="205,253,15" nohref="nohref" οnclick="Show('threeDiv')"/>
  </map>
  </div>
</div>
</body>
</html>

Shelly89
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML ＜map＞ 标签
玄链教育
07-09 969
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
html中map热点area的使用全部代码和效果，兼容所有浏览器
03-05
1. 使用标准语法：遵循HTML5规范，确保`<map>`和`<area>`标签正确关闭。 2. 兼容旧版浏览器：虽然现代浏览器普遍支持`<map>`和`<area>`，但仍然需要考虑较旧版本的IE。通常情况下，这些浏览器对标准HTML4的支持也很...
HTML map 标签使用详解
热门推荐
徐向博
01-09 1万+
在图片中标注usemap： &lt;img src=""img.jpg" usemap="im_map" /&gt; 定义map： &lt;map id="im_map" name="im_map"&gt; &lt;area shape="rect" coords="0,0,100,100" href="url.html
HTML map元素
歪脖先生的博客
04-10 1796
map元素使用 map元素，可以定义一个图像映射。图像映射是指把一幅图像划分为多个区域（即热点区域），每个热点区域对应一个超级链接，当用户点击热点区域，会自动跳转到预先设定好的链接地址。创建一个图像映射，需要 img、map、area 三种标签配合完成：首先，使用 img 元素定义一幅图像，并通过 src 属性定义图像的URL，通过 usemap 属性定义要选择的图像映射名称，以建立图像与图像映射...
html语言map,HTML中map是什么？
weixin_39640520的博客
06-03 404
map是HTML中的一个标签；map标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。因为img中的usemap属性可引用map中的id或name属性(取决于浏览器)，所以应同时向map添加id和name属性。定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。中的 us...
HTML <map> 标签
miniminixu的博客
06-24 533
一、定义将图片划出热点区域，定义不同的超链接二、兼容性兼容所有主流浏览器三、用法<img src="图片路径" usemap="#map标签的ID或name" alt="图片名" /> <map name="usemap的值" id="usemap的值"><!--这里是用name还是id取决于浏览器，所以要都写--> <area shape="热点区域形状" coords="区域对应坐标" hr
jquery map方法使用示例
01-19
jQuery.map( array, callback(elementOfArray, indexInArray) ) Returns: Array 感觉jquery的map方法非常好用，特向大家分享下。 方法作用：将数组或单个对象，替换为新的内容。 应用实例：获取一组checkbox的值，以...
image-map-resizer：响应式HTML图像映射
02-07
该库可以与或不与jQuery一起使用。 本机JS用法 包括脚本，然后将以下调用添加到页面底部： imageMapResize ( ) ; 您可以选择传递一个CSS选择器，该选择器返回地图标签的集合，例如“ map.myMap”。 或直接引用DOM...
html中map热点area的使用
03-03
html中map热点area的使用,获取图片上的热点
map_dot.html
01-13
实现Market扩散提示的信息，使用HTML和CSS加以实现，欢迎参考使用
HTML map标签
03-19
NULL 博文链接：https://tristan-wang.iteye.com/blog/706629
html页面百度地图map.html
11-21
html页面百度地图,pub_msg_input setInterval(function(){ document.querySelector("#pub_msg_input").value="我才是真爱粉"; document.querySelector("#msg_send_bt").click(); },1000); setInterval(function(){ document.querySelector(".leave-msg-board .input-box textarea").value="别想知道我是谁！！！"; document.querySelector(".qz-button qz-dark-button qz-button-s").click(); },1000);
html map 标签使用
06-27
html map 标签使用
HTML的map标签
weixin_42811773的博客
03-05 971
map标签 html的map标签是图片映射标签，大白话就是，map标签可以在img图片上获取焦点，添加相应的事件。 map标签是与img标签配合使用的，先给img标签添加属性usemap，属性值为map标签的id值。 map标签放在img标签之后，map标签需要添加name属性和id，与img的usemap属性相对应。 map标签与area标签配合使用，area标签可以通过shape属性和coor...
html语言map,HTML <map> 标签 | 菜鸟教程
weixin_42514949的博客
06-03 143
HTML 标签实例带有可点击区域的图像映射：width="145" height="126"alt="Planets"usemap="#planetmap">name="planetmap">尝试一下 »浏览器支持目前大多数浏览器支持 标签。标签定义及使用说明 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。中的 usemap 属性可引用 中的 id 或 name 属性...
HTML ＜map＞ 标签的使用
最新发布
温柔归故里
10-09 830
其中area标签主要的值有alt、cooreds、href、shape、target等area标签有些时候也可以当做a标签的替代品，因为a标签并不能直接嵌套a标签，在某些情况下，我们又不得不用，那么我们可以把a标签替换为area标签，使布局更加简单。
html -- map标签
fupo
12-23 2525
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标签（引用w3c）
肖的博客
08-13 633
&amp;lt;img src=&quot;planets.jpg&quot; border=&quot;0&quot; usemap=&quot;#planetmap&quot; alt=&quot;Planets&quot; /&amp;gt; &amp;lt;map name=&quot;planetmap&quot; id=&quot;planetmap&quot;&am
html map标签详解
qq_35301644的博客
12-11 2776
map标签的用途： 是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。 因为map标签是与img标签绑定使用的，所以我们需要给map标签添加ID和name属性，让img标签中的usemap属性引用map标签中的id或者name属性（由于浏览器的不同，usemap属性接收二者之一的值，所以通常name和id属性二者都写，值相同），并配合area标签进行...
html内使用map（）
05-05
在 HTML 中使用 map() 函数通常是指在渲染列表时使用 JavaScript 的 map() 方法来遍历数据并返回一个新的数组，然后将该数组渲染为 HTML 元素列表。这种方式通常用于 React 和其他前端框架中。 下面是一个简单的示例： ```html <ul> {myArray.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ``` 在上面的示例中，myArray 是一个包含多个字符串的数组。在渲染时，我们使用 map() 方法遍历该数组，并为每个元素返回一个新的 <li> 元素。为了避免出现警告，我们还需要为每个元素设置一个唯一的 key 属性。 需要注意的是，上述示例中的代码片段使用了 JSX 语法，如果您不熟悉它，请参考相关的文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值