一張圖片的靜態頁！如果你不會切圖做靜態頁，那麼就用一張效果圖來實現吧！
一、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.οnlοad=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
