Image Map的制作

映射图像（Image Map），它是指一幅根据链接对象不同而被人为划分为若干指向不同链接的区域或“热点”（Hotspots）的相应图像区域，当点击设置好的“热点”时，会弹出链接的相应页面。

需要在一张图片中，设置一个区域为热点就用到了<map>和<area>，其中<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

注释：

• area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
• <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以应同时向 <map> 添加 id 和 name 属性。

属性值

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

简单实例

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

运用Dreamweaver制作地图

1. 在页面中插入图像。

2. 绘制热点区域。单击页面上的中国地图，选择底部“属性”栏中的“矩形热点工具”在地图上绘制热点区域，如下图所示：

3. 当绘制完矩形热点区域后，或者重新选择绘制好的矩形热点区域后，图像属性面板将变成热点属性面板。在“链接”框中选择热点区域所要链接的目标网页，在“目标”框中选择“_blank”，使链接的网页在新窗口中打开，在“替换”框中填入相关的提示说明。如下图所示：

 

 

 

 

加入js的功能比较全效果比较炫的地图

<map id="Map" name="Map">
    <area alt="Yukon" coords="88,95,29,152,34,164,88,206,81,187,78,170,84,150,85,134,89,115,94,107" href="./?p=YT" onclick="typeof s_trackButton == 'function' &amp;&amp; s_trackButton('Change Region');setPC('YT');" onmouseout="visibToggleSplash('mapYT','hide')" onmouseover="visibToggleSplash('mapYT','showBlock')" rel="nofollow" shape="poly" /> 
    <area alt="British Columbia" coords="89,319,41,295,33,300,25,282,13,234,19,224,34,224,43,218,41,180,35,170,98,216,76,264" href="./?p=BC" onclick="typeof s_trackButton == 'function' &amp;&amp; s_trackButton('Change Region');setPC('BC');" onmouseout="visibToggleSplash('mapBC','hide')" onmouseover="visibToggleSplash('mapBC','showBlock')" rel="nofollow" shape="poly" /> 
</map>
<img class="absolute" height="434" id="mapYT" src="images/map_yukon.png" usemap="#Map" width="477" /> 
<img class="absolute" height="434" id="mapBC" src="images/map_britishcolumbia.png" usemap="#Map" width="477" />

js部分

function visibToggleSplash(tagId, showHide) {
    switch (showHide){
      case 'showBlock':
        if ( document.getElementById(tagId) )
            document.getElementById(tagId).style.display='block';
        if ( document.getElementById('link'+tagId) )
            document.getElementById('link'+tagId).className='selected';
        break;
    case 'hide':
        if (document.getElementById(tagId))
            document.getElementById(tagId).style.display='none';
        if (document.getElementById('link'+tagId))    
            document.getElementById('link'+tagId).className='';
        break;
    default:
        return false;
    }
}

 

 

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/04/06/3001917.html