【图片映射】利用map和img进行图片中位置定位事件

<!-- 右侧导航栏 start -->
<div class="gototop" id="gototop"><img src="img/gototop.png" alt="" usemap="#Gototop"/></div>
<!-- 右侧导航栏  end -->


<!-- 以下是table进行的 位置定位  -->
<map name="Gototop" id="Gototop">
    <area shape="rect" coords="0,96,120,124" data-value="超值秒杀" href="https://www.baidu.com"/>
    <area shape="rect" coords="0,127,120,157" data-value="超值数码" href="https://www.baidu.com" />
    <area shape="rect" coords="0,160,120,186" data-value="超值配件" href="https://www.baidu.com" />
    <area shape="rect" coords="0,189,120,218" data-value="超值家电" href="https://www.baidu.com" />
    <area shape="rect" coords="0,218,120,249" data-value="超值家纺" href="https://www.baidu.com" />
    <area shape="rect" coords="0,249,120,280" data-value="超值食品清洁" href="#food" />
    <area shape="rect" coords="0,280,120,320" data-value="回到顶部" onclick="gototop()" />
</map>

//矩形：    shape="rect" coords="x1,y1,x2,y2"  coords：是定位"左上"和"右下"  两个点的xy轴来确定矩形
//圆形：    shape="circle" coords="x1,y1,R"    coords：圆心的x轴和y轴 圆心半径
//多边形:   shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4……"   coords:多边形  位置定位方式为：各个点的坐标

 

 

 

 

【强行插入】

 

根据W3C的教育：http://www.w3school.com.cn/tags/tag_map.asp

map:

 

 

 

 

area:

 

 

 

 //map自适应

<script type="text/javascript">  
  
        adjust();  
  　　　　//防止页面大小变化map定位不准
        var timeout = null;
        window.onresize = function () {  
            clearTimeout(timeout);  
            timeout = setTimeout(function () { window.location.reload();}, 100);
        }  
  
        //获取MAP中元素属性  
        function adjust() {  
            var map = document.getElementById("Map");  
            var element = map.childNodes;  
            var itemNumber = element.length / 2;  
            for (var i = 0; i < itemNumber - 1; i++) {  
                var item = 2 * i + 1;  
                var oldCoords = element[item].coords;  
                var newcoords = adjustPosition(oldCoords);  
                element[item].setAttribute("coords", newcoords);  
            }  
            var test = element;  
        }  
  
        //调整MAP中坐标  
        function adjustPosition(position) {  
            var pageWidth = document.getElementById("mapbox").clientWidth;//获取图片容器宽度
            var pageHeith = document.getElementById("mapbox").clientHeight;//获取图片容器高度
  
            var imageWidth = 681;　　　　//图片实际像素宽
            var imageHeigth = 354;  　　//图片实际像素高
  　　　　　　//切割每个坐标点
            var each = position.split(",");  
            //获取每个坐标点  
            for (var i = 0; i < each.length; i++) {  
                each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐标  
                i++;  
                each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐标  
            }  
            //生成新的坐标点  
            var newPosition = "";  
            for (var i = 0; i < each.length; i++) {  
                newPosition += each[i];  
                if (i < each.length - 1) {  
                    newPosition += ",";  
                }  
            }  
            return newPosition;  
        }  
</script>

本处js我转载于：http://blog.csdn.net/crystalwood/article/details/13533401