Html手动编辑多个Map热点

文章目录[隐藏]

一、所有主流浏览器都支持 map 标签
二、拓展
三、DW一张图设置多个热点
四、关于map地图热点链接点击边框的消除
五、 map热点上加鼠标移动上去的效果

我们通常在dreamweaver中 插入图片后利用热点工具来完成区域链接。也就是图片热点链接，就是为图片指定一个或多个区域以实现点击跳转到指定的页面。简单来说就是点击某一区域就能跳转到相应的页面，而无需点击整个图片才能跳转。需要在一张图片中，设置一个区域为热点就用到了map，说到图片热点链接，我首先想到了map + area，尤其是在网页banner广告位中想实现点击指定区域或链接以实现跳转是非常有用的。map的作用是定义一个图像映射。所谓图像映射，是指带有可点击区域的一幅图像。然而光有map是不够的，还需要配合area标签来使用，area元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域，也就是指定的点击区域。

一、所有主流浏览器都支持 map 标签

提示和注释：
注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释：中的 usemap 属性可引用

中的 id 或 name 属性（取决于浏览器），所以我们应同时向

添加 id 和 name 属性。

语法
属性值
 
值	描述
x1,y1,x2,y2	如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius	如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn	如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

二、拓展

　ps:中的 usemap 属性可引用

中的 id 或 name 属性（取决于浏览器），所以我们应同时向

添加 id 和 name 属性。shape属性规定了点击区域的形状。而coords 属性则规定区域的 x 和 y 坐标。这两个属性结合起来使用，来规定点击区域的尺寸、形状和位置。

　　shape可取值：circle(圆形)、polygon(多边形)、rect(矩形)

　　shape取值rect，则coords对应的值为x1,y1,x2,y2。第一个坐标表示矩形左上角的坐标，第二个坐标表示矩形右下角的坐标。

　　shape取值circle，则coords对应的值为x,y,r。其中x，y表示圆心的坐标，r则是圆的半径。

　　至于多边形我没使用过，多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

　　每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。（由于多边形没使用过，此处引用的w3school）

三、DW一张图设置多个热点

直接看代码：

  <img src="logo/emailmap.fw.png" width="1100" height="26" usemap="#Map" border="0" />
  <map name="Map" id="Map">
    <area shape="rect" coords="1037,7,1099,27" href="###" />
    <area shape="rect" coords="x1,y1,x2,y2" href="###"/>
    <area shape="rect" coords="x1,y1,x2,y2"href="###"/>
    .....
  </map>

四、关于map地图热点链接点击边框的消除

在使用map地图建立热点时，默认点击地图热点区域是有外边框线的，这是在鼠标点击时才会出现的，比较影响美观，一般都需要不显示点击边框线，在建立好地图热点时，在代码窗口热点链接后面添加样式：style="outline:none"，即可消除点击是出现的外边框！

五、 map热点上加鼠标移动上去的效果

问题
电子校报，用map标签做的，想加一个如图中鼠标移动到某个区域显示红色透明的层，层的坐标和area的坐标一样的，黄色的提示框框已经实现，红色的透明层怎么实现？
解决代码

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<img src="http://avatar.csdn.net/9/5/B/1_qqyatou.jpg" border="0" usemap="#Map" style="width:431px;"/>
<map name="Map" id="Map"><area shape="rect" coords="155,56,287,244" href="#"  />
<area shape="rect" coords="95,310,331,366" href="#"/></map>
<style>body{margin:0px;padding:0px}
.pop{position:absolute;display:none;border:solid 1px #f00;opacity:0.5;filter:alpha(opacity=50);background:#f00}</style>
<div class="pop" id="pop"></div>
<script>
$('area').mouseenter(function(){
  var c=this.getAttribute('coords').split(',');
  $('#pop').css({left:c[0],top:c[1],width:parseInt(c[2])-parseInt(c[0]),height:parseInt(c[3])-parseInt(c[1]),display:'block'})
})
$('#pop').mouseleave(function(){$(this).hide()});
</script>

511遇见

不一样的遇见