学习HTML图像映射

继续探究HTML与CSS:图像映射

 

原文地址：http://www.cnblogs.com/KeenLeung/archive/2012/11/04/2754142.html

图像映射：

<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>