繼續探究HTML與CSS:圖像映射

圖像映射：

<map id = "MyImage">
<area shape = "rect" coords = "0,0,100,100" href = "MyImage_1.gif" alt = "MyImage_1" />
<!--"rect"表示該區域是矩形，"0,0,100,100"表示左上角的坐標和右下角的坐標-->
<area shape = "cricle" coords = "10,10,5" href = "MyImage_1.gif" alt = "MyImage_2" />
<!--"circle"表示該區域為圓形，"10,10,5"表示圓心坐標和半徑-->
<area shape = "poly" coords = "0,0,100,100,234,234,123,123,245,245" href = "MyImage_1.gif" alt = "MyImage_3" />
<!--"poly"表示多邊形，"0,0,100,100,234,234,123,123,245,245"表示所有頂點的坐標-->
</map>
<img src = "MyImage.gif" alt = "My image" title = "My image" usemap = "#MyImage" style = "border-style:none"/>
<!--usemap屬性的值為<map>標簽id的值-->

以代碼來自：http://www.cnblogs.com/wen858636827/archive/2012/11/04/2753747.html

可以通過DreamWeaver建立圖像映射：

1.按一般步驟插入圖像的代碼：

<p>
  <img src="2.jpg" border="0">
</p>

2.點擊設計按鈕，轉換到設計的界面：

3.選擇“常用”中的“圖像”按鈕：

4.有幾個勾去選項可以選擇：

這些都是你建立映射時圖形的形狀，選一個，接着下一步

5.圈取你要建立映射的位置：

6.在屬性欄中填寫相關的信息：

7.保存，即可自動生成代碼

<p>
  <img src="2.jpg" border="0" usemap="#Map">
<map name="Map"><area shape="circle" coords="265,267,84" href="#another">
</map>
</p>