继续探究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>