图象地图分为: 客户端图象地图,服务器端图象地图.但是现在服务器端图象地图已经被前者给淘汰了.什么是图象地图?把一幅图象
分成多个区域,每个区域指向不同的URL.例如:把一幅中国地图的图象按照省份划成若干区域,这些区域被称为热点区域,点击热点区域就
可以链接到相关的地方,这就是图象地图.
知道了概念,那怎么样产生图象地图呢?
1> 必须定义出图象上个热点区域的形状,位置坐标,及指向的URL地址信息,这个过程叫图象热点映射.图象热点映射需要使用<map nam
e=mapname></map>标签进行说明.其中name属性为该图象热点映射指定了一个名称.
2> 图象热点映射中的各个区域用<are>标签说明,<area>标签的格式为: <area sharp="形状" coords="坐标" href=url>,也可以
nohref替换href,表示该区域单击鼠标无效.<area>标签还可以有个target属性,用来指名浏览器哪个窗口或侦中显示href属性所
指向的资源.
3> 定义好图象热点后,接着就要在<img>图象标签中增加一个名为usemap的属性设置,usemap属性指定该图形被用做图象地图,其设置
值为所使用的图象热点名称.
eg:
<img src="logo.gif" border="0" usemap="#mymap">
<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="a.html">
<area shape="rect" coords="50,0,100,50" href="b.html">
<area shape="rect" coords="100,0,150,50" href="c.html">
</map>
sharp属性的设置说明:
.rect 定义一个矩形区域,coords属性设置为矩形的左上角,右下角的坐标,各个坐标之间用逗号隔开.
.poly 定义一个多边形区域,coords属性设置为多边形个顶点的坐标值.
.circle 定义了一个圆形区域,coords属性设置为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径.
eg:
<map name="mymap">
<area sharp="rect" href="a.html" coords="140,20,280,60">
<area sharp="poly" href="b.html" coords="80,100,60">
<area sharp="circle" href="c.html" coords="100,100,180,80,200,140">
</map>
摘自：http://www.blogjava.net/DuYang/articles/45270.html
所谓图像热点区域，就是指一个图像中的某一区域，那么热点图像区域的链接，自然就是使用这个区域作为超链接，就好像在一张地图上，以其中某一区域作为超链接。所以，在代码中也用到一个形象的标签--<map>标签。<map>标签下，嵌入使用<area>标签表明某一区域，其中有3个属性值来确定这个区域，分别是shape属性、coords属性和href属性。
shape属性：用来确定选区的形状，分别是rect（矩形）、circle（圆形）和poly（多边形）。
coords属性：用来控制形状的位置，通过坐标来找到这个位置。一般来说，在实际操作中，设计者都会选择借助可视化的编辑页面的软件来实现这一功能，这就省却了花费很多心思在图像上测算具体的坐标值。
href属性：就是超链接。
所以，将这些属性运用在一起，这种方法的具体代码如下：
<map id=…> <area shape="…" coords="…" href="…"> </map>这里介绍一种借助Dreamweaver软件来制作热点图像链接的实例。Dreamweaver的工作界面如图6.13所示。
图6.13 Dreamweaver中制作热点区域 在Dreamweaver标准工作界面中，上部分是代码区，可以在这里写代码，中间是预览页面的地方，最下面是修改一些属性值的面板，右侧是一系列不同的工作面板。在这里并不需要使用到。当使用代码在页面中置入图像以后，在图6.13中的左下角单击线框中的图形按钮，Dreamweaver中便直观地表示了不同形状热点区域的图标。选中后，在预览页面区域中的图像上绘制需要的形状并放置在需要的位置。设置好以后，代码区域会自动生成<map>标签，这里要修改两个属性。这时在代码区域中可以看到如下代码：01<img src=图片/向左向右.jpg / usemap="#Map"> 02 <map id="Map"> 03 <area shape="circle" coords="303,265,86" href="#" /> 04 </map>
在这个默认的代码中，第2行中id属性下为Map，这个名字可以自行去定义。注意在第1行中，引用了这个命名为Map的热点区域链接。而在第3行的<area>标签中，shape和coords属性已经自动生成。在这个例子中，表示为圆形的选区，位置定义在"303，265"的坐标位置上，尾数86代表的是这个圆的半径值，这个数值控制圆面积的大小。完整的页面源码如程序6.12所示。
【本节示例参考：资料光盘\第6章\6-12 借助Dreamweaver软件来制作热点图像链接.html】
【实例6-12】借助Dreamweaver软件来制作热点图像链接，其源码展示如下：
程序6.12 借助Dreamweaver软件来制作热点图像链接.html
01 <html> 02 <head> 03 <title>借助Dreamweaver软件来制作热点图像链接</title> 04 </head> 05 <body> 06 <img src=图片/向左向右.jpg border="0" / usemap=#Map> 07 <map name="Map"> 08 <area shape="circle" coords= "305,266,43" href="后退.html" /> 09 <area shape="rect" coords=" 246,105,298,135" href="后退.html"> 10 <area shape="rect" coords=" 264,44,293,74" href="后退.html"> 11 <area shape="rect" coords=" 243,16,260,51" href="后退.html"> 12 <area shape="rect" coords=" 23,40,59,74" href="后退.html"> 13 <area shape="rect" coords=" 13,98,59,120" href="后退.html"> 14 <area shape="rect" coords=" 40,132,78,162" href="后退.html"> 15 </map> 16 </body> 17 </html>【运行程序】这个页面在浏览器中的结果如图6.14所示。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
