HTML圖片熱點

       目前在改進內部系統的一個功能，前端給出了，從前段到後端都需要自己來寫了，好在自己對前端的技術也略有涉獵。

       頁面需要實現一個按鈕切換的效果，其實切換隻是冠冕堂皇的話了，就是點擊圖片一下，換成另一張圖片。效果如下：

              

       這是從上截下來的兩張圖片，需要的效果就是點擊正式版，切換到左邊的效果，點擊編輯版切換到右邊的效果，所以需要正式版和編輯版上觸發不同的事件，但是正式版和編輯版是在一張圖片上的，引出本篇的主題，圖片熱點。

       

function switchToFormal() {switchTo.src = "images/formal.png";}function switchToEdition() {switchTo.src = "images/edition.png";}

<img id="switchTo" src="images/formal.png" usemap="#switchToMap" width="134" height="32" /><map name="switchToMap"><area alt="正式版" shape="rect" coords="1,1,69,37" href="javascript:switchToFormal()" /><area alt="編輯版" shape="rect" coords="70,1,138,37" href="javascript:switchToEdition()" /></map>

       我建立的是矩形(shape="rect")的熱點，coords是熱點座標，矩形需要兩組座標，左上方頂點的座標和右下角頂點的座標，這兩個點確定了一個矩形。shape還有其它形狀，更多資訊就google吧。

       熱點多用於大張圖片不同地區設定不同連結，如地圖，這裡如此做只是不想再去PS切圖，那樣得四張圖片。