返回


文章标题:
                 如何制作HOMEPAGE(2)
  

7.4 可点图(Clickable Image Map)

你可能还记得在7.1.5中,我们曾经把一幅建筑物的图像作为一个超链,在这一节中我们还
要把更多的超链信息蕴藏于一幅图里,这就是Homepage中的可点图(Clickable Image Map),
如图7-14所示,当用户鼠标点击图中的某一区域,就触发相应的超链,给用户一种很
直观的感觉。



图7-14 可点图中蕴藏着丰富的超链信息

7.4.1 可点图的标记语法

将一幅图标记为可点图的语法格式为:
        <A HREF="map文件的URL"> <IMG SRC="http://202.97.224.112/image/可点图源文件的URL" ISMAP> </A>
其中map文件是一个可点图的配置文件,它包含着可点图中每个区域所各自对应的URL信息
,在https中它必须带有.MAP的文件扩展名,关于它的文件格式在下一小节中介绍。而图像
标记<IMG>中的属性ISMAP就是告诉Web浏览器,将此图像作为可点图来解释。例如图
7-14中的可点图可以这样标记:
        <A HREF="/map/allmap.map"> <IMG SRC="http://202.97.224.112/image//map/allmap.gif" ISMAP> </A>

7.4.2 map文件结构

map文件也是一个ASCII文本文件,它的每一行都定义了一个图像区域以及当该区域被触发
后应返回的URL信息。
此文件的一般格式有以下四种:
        1.园形区域:    circle  (x, y) r URL
        2.矩形区域:    rectangle       (x0,y0) (x1,y1) URL
        3.多边形区域:ploygon   (x0, y0) (x1,y1) (x2,y2) . . . URL
        4.缺省区域:    default URL
其中园形区域的(x,y)坐标是圆心,r是半径长度;矩形区域的两个坐标分别是矩形的左上角
和右下角;多边形区域的各坐标是它的各个顶点;缺省区域就是没有被定义过的区域。
例如:
        default /clickerr.htm
        circle (93,99) 43 ground.htm
        rect (165,73) (266,138) pool.htm
        poly (186,230) (230,229) (231,252) (189,260) (171,222) teleph.htm
当用户鼠标触发了可点图时,https就获得了从Web浏览器传来的触发点坐标值,于是便在
相应的map文件中找出该坐标所属的区域,并把与该区域相相应的URL所指向的信息页交
给Web浏览器。