<!-- 右侧导航栏 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="回到顶部" οnclick="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