Html5的map在实际使用中遇到的问题及解决方案

前言：百度了一下html map，嗯嗯，介绍的挺详细的，如果是初学者，直接看他们的教程，挺好的，就不用我再多说了。

不过我发现一个问题，就是都是介绍map有什么属性怎么用的，这明显就是照搬文档自己再改一下嘛，难道你们在使用中没遇到什么特别的需求或者什么问题？怎么不写出来？

所以我就不介绍map了，直接说遇到的问题。

问题一：如果图片原始尺寸是900px，但是你展示的尺寸是450px,那map就定位不准了，怎么破？

问题二：如果一个页面有多张图片需要map，怎么做？

一、素材图片：

    1、这是一张900px的素材图片，我们要让右下角4个小圆图标可以点击。

    

二、HTML结构：

    1、coords的对应坐标不用变，只需在JS里面改变其比例就OK！

<div class="map_img">
    <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style=" 450px">
    <map name="mapName">
        <!-- 方形区域写法 -->
        <!-- <area shape="rect" coords="605,250,660,305" target="_blank" href ="javascript:alert(1);" alt=""/> -->
        <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert('汽车图标');" alt=""/>
    </map>
</div>

  2、如果有多张图片，一张图片对应一个map，class不用变，改变map的name值和对应的usemap值就好。name=usemap他们俩是一对CP哦，不要分开它们，给他们一样的值。

<div class="map_img">
    <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style=" 450px">
    <map name="mapName">
        <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert('汽车图标');" alt=""/>
    </map>
    <!-- 一张图片对应一个name和usemap -->
    <img class="mapImg" usemap="mapName2" src="isphoto/abc.png" alt="" style=" 450px">
    <map name="mapName2">
        <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert('第二张图的汽车图标');" alt=""/>
    </map>
</div>

三、样式表：

　　！@#￥%……&*？（404）

四、JS设置图片的比例：（ 记得引用jquery: <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> ）

// 设置 图片热点区域
function set_map() {
    var mapD = $('area'); //获取页面所有的热点区域
    var imgW = $('.mapImg')[0].naturalWidth || 900; //图片原始尺寸
    var imgW01 = $('.mapImg')[0].innerWidth || 450; //图片现在尺寸
    var Multiple = imgW01 / imgW; //对应比例
    var _arrS = ''; //存放coords的值
    var _arr = []; //存放coords对应的值
    for (var i = 0; i < mapD.length; i++) { //热点区域的个数
        _arr = [];
        _arrS = $(mapD[i]).attr('coords');
        _arr = _arrS.split(',');
        //coords值的个数，圆形为3个，方形为4个
        for (var j = 0; j < _arr.length; j++) { 
            _arr[j] = _arr[j] * Multiple;
        }
        _arrS = _arr.join(',');
        // 把缩放比例后对应的coords，赋值给原有coords
        $(mapD[i]).attr('coords',_arrS); 
    }
}
set_map();

五、总结：

    细心的童鞋就会发现，为什么别人给图片都是加ID而我却加class，原因是为了方便多张缩放过的图片使用map定位。额...... 多读几遍就懂！

六、课后作业：

    把剩余的三个小圆图标的坐标标出来，并测试没问题？（提示：用PS的 矩形选框工具+信息 可以很容易就找到对应的坐标）