使用html area标签在图片上设置链接

一张图片的静态页！如果你不会切图做静态页，那么就用一张效果图来实现吧！

一、area标签实现图片局部点击事件

原理：在图片上设置链接的area标签，产生图片的局部点击事件效果~

<img id="img1" src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />相当于效果图

<map name="planetmap" id="planetmap">效果图中需要被点击的区域集合

  <area shape="circle" coords="180,139,14" href ="1.html" alt="点我，第一步" />可点击区域定义
  <area shape="circle" coords="129,161,10" href ="2.html" alt="点我，第二步" />可点击区域定义
  <area shape="rect" coords="0,0,110,260" href ="3.html" alt="点我，最后一步" />可点击区域定义

</map>

参数说明：

shape：可点击区域形状

1）rect：矩形。

2）circle：圆形。

coords：可点击区域坐标

1）当shape是矩形时，此值是4个坐标值，前两个为坐上坐标（x，y），后两个为右下坐标

2）当shape是圆形时，此值是3个坐标值，前两个为圆形的坐标，最后一个为半径。

usemap：使用哪个map的区域点击事件

这里介绍的是html4中area标签属性，可能html5中有区别

二、图片自适应浏览器宽度问题

由于页面就是一张图片，所以会出现屏幕宽度不同（浏览器宽度不同）造成的显示不全或横向滚动条问题，比如1920px宽的图显示在1366px宽的浏览器上，就会出现横向滚动条。orz

尝试了几种方案：

1、将效果图改成div的背景图，对背景图居中显示

<div style="background:url(/images/abc/1.jpg) top center no-repeat;">

虽然达到了适应浏览器宽度的效果，但area标签不支持图片是背景图，所以点击事件失效！

2、将图片按浏览器当前宽度指定宽度大小

<script type="text/javascript">
window.onload=function(){
if (window.innerWidth){
winWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
if (document.documentElement && document.documentElement.clientWidth){
winWidth = document.documentElement.clientWidth; 
} 
$("#img1").css("width",winWidth);
}
</script>

这种情况虽然也能达到效果，但area的坐标值位置都发生改变，点击区域不对了！

3、将图片外层div左侧距离固定

求浏览器宽度winWidth同2，略

var left = (winWidth-1920)/2;//假设图片宽度是1920
$("#div1").css("left",left);

$("#div1").css("position",absolute);

将左侧多出部分切掉，同时，去掉右侧多出部分（隐藏横向滚动条）

html{
overflow-x:hidden;
  overflow-y:auto;
}

此方法缺点，如果浏览器不是全屏显示，右侧部分的图片会被切掉，而且没有滚动条，这就是不会切图的程序员写静态页的偷懒方法orz

参考：http://www.w3school.com.cn/tags/tag_area.asp