9.2 可点击热点图片(Clickable Image Maps)
热点图片是网络上很常见的功能。热点图片可以有多个超级链接,我们甚至可以为每个链接安排一个javascript脚本。这种结构使网络设计人员可以将链接、操作和图片灵活地结合在一起。
举个例子,旅行社的网站上可以用一张热点图让客户在世界地图上选择他们想旅游的地方。热点图上可以在世界各个地方分别放上超级链接,如单击法国就可以到另一个详细讲解法国旅游配套、景点介绍、风俗人情等等的网页。而如果单击委内瑞拉,就会转到关于委内瑞拉的网站。
热点图片为我们提供了链接去其它网页的另一种方式,因此这是一种十分有用的技术。可是它有一个问题,就是制作热点图片非常困难。对于每一个链接,我们都需要定义一个范围。这个范围定义为一个多边形,而这个多边形又被定义为一组点,每个点是该多边形的一个顶点。而要确定这些定点的坐标不是件容易的事,特别是如果你的图片各处布满了超级链接。
当然,GIMP有可以帮助我们工具我们可以在图片:滤镜/网络菜单下找到“热点图片”插件。这个插件让您可以直接在图片上指定上面所说的顶点的位置,另外,它也能让你方便地为加入链接,以及与链接对应的javascript脚本。最后,该插件能生成这个热点图片对应的HTML代码。所有顶点坐标、链接和javascript脚本都会包含在这个HTML文件中。
我们由图9.13(a)中所示的空白图片开始介绍如何使用热点图片插件。
图(9.13)
一般上我们不会将一个空白图片做成热点图,不过这倒是一个不错的例子。如图9.13(b)所示,热点图片对话框由三个主要部分组成。其中一个是画布,显示我们要做成热点图的图片。因为我们使用的是空白图片,所以这里也会使一片空白。在画布左边,我们可以看到包括选择和编辑功能键的工具栏。这些工具是用来画定义热点的多边形的。最后,画布右边还有一个热点列表,我们使用这个列表来整理和编辑热点。
我们用“热点图”选择工具来定义热点的范围。我们可以使用的工具包括矩形,圆形和多边形。其中,多边形是功能最强的,我们可以用它来定义十分复杂的形状。
图(9.14)
上图中我们选择了一个不规则的形状。我们只需选中多边形工具,然后在画布上依次点下图中所示的点就行了,每一个点都会成为多边形的一个顶点。在画布上双击多边形最后一点就可以停止使用多边形工具。
只要我们定义好了一个9.14(a)中所示的多边性,GIMP就会弹出一个如9.14(b)中所示的“设置”对话框,要求我们输入热点对应的超级链接。如图所示,您可以输入任意有效的网络链接值,比如,http://www.gimp.org。同时, ... 用这些功能。
图(9.15)
上图显示当我们定义了几个热点后的“热点图片”对话框。三个定义了的热点显示在“热点列表”中,同时选中的热点会呈蓝色。上面谈到的编辑工具可以用来列表中存在的任意热点定义。点击一个热点就可以选中它。如果要删除一个热点,只需选中该热点,然后单击红色x键。单击铅笔样按钮就可以弹出“设置”对话框。
入图9.15(a)所示,当前选中的热点的顶点以红色方块表示,我们可以新加、删除或移动这些顶点。选中箭头工具我们就可以点拖任何定义的顶点。右击一个点就会弹出9.15(b)所示的菜单,然后我们就能删去这个点。要新加点的话只需右击一条线段,就能弹出9.15(c)中所示的菜单。
当您完成编辑时,您就可以单击软盘图标或者从“文件”菜单中选择“另存为”来保存您的文件。这时会弹出一个对话框,要求我们输入保存的文件名,该文件名应当以.html或.htm为后缀。
我们来看看图9.16(a)中所示的一个实例。
图(9.16)
图中所示的是美国东南部。这十个州上都标上了它们各自名称的缩写:FL佛罗里达州,GA乔治亚州,等等。我们要创作一个热点图片,为每个州制作一个链接。9.16(b)中的是“热点图片”对话框,其中画布上显示的是9.16(a)。我们可以用多边形工具很容易的描出每个州的轮廓。当我们全部描完时,我们就可以保存文件。下面就是我们得到的文件:
<IMG
SRC="/home/cbunks/PROJECTS/GIMP/BOOK/08-WEB_CENTRIC/Figures/southeast-usa.gif"
WIDTH=482 HEIGHT=428 BORDER=0 USEMAP="#MyMap">
<MAP NAME="MyMap">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
<!-- #$-lease do not edit lines starting with "#$" -->
<!-- #$VERSION:1.1 -->
<!-- #$AUTHOR:Carey Bunks -->
<AREA SHAPE="OLY" COORDS="6,91,10,178,21,183,21,195,98,195,113,144,128,
107,113,104,120,92" HREF="http://www.good-travel.com/arkansas.html">
<AREA SHAPE="OLY" COORDS="21,197,21,234,32,252,22,291,49,292,69,299,75,
295,101,312,117,307,131,308,150,312,142,298,120,281,138,276,130,255,83,253,
100,197" HREF="http://www.good-travel.com/louisiana.html">
<AREA SHAPE="OLY" COORDS="119,136,172,135,174,276,140,277,132,255,85,253"
HREF="http://www.good-travel.com/missouri.html">
<AREA SHAPE="OLY" COORDS="119,136,269,127,288,106,334,74,168,83,170,88,
136,93" HREF="http://www.good-travel.com/tennessee">
<AREA SHAPE="OLY" COORDS="139,91,170,90,170,81,285,75,319,43,295,28,293,12,
274,18,251,4,243,4,243,12,232,18,218,39,209,33,186,48,171,46,157,65,145,68"
HREF="http://www.good-travel.com/kentucky.html">
<AREA SHAPE="OLY" COORDS="173,272,200,271,190,248,261,247,261,208,235,130,
170,133" HREF="http://www.good-travel.com/alabama.html">
<AREA SHAPE="OLY" COORDS="237,132,263,213,266,254,342,255,342,245,357,247,
367,207,305,139,292,135,296,126" HREF="http://www.good-travel.com/georgia.html">
<AREA SHAPE="OLY" COORDS="300,127,296,133,365,205,420,146,388,120,357,122,351,
113,317,117" HREF="http://www.good-travel.com/south-carolina.html">
<AREA SHAPE="OLY" COORDS="333,74,270,124,304,124,314,117,354,112,360,120,386,
120,423,145,433,145,440,127,465,111,459,97,479,78,468,60"
HREF="http://www.good-travel.com/north-carolina.html">
<AREA SHAPE="OLY" COORDS="195,253,198,271,227,271,257,288,284,275,318,303,
328,303,329,345,347,365,360,395,388,416,404,410,408,367,385,317,355,249,342,
248,342,259,335,259,335,255,266,256,259,249"
HREF="http://www.good-travel.com/florida.html">
</MAP>
您可以看到,每一个热点都有一个AREA超链接标签。这个标签包含了定义多边形的顶点坐标以及超链接的地址。以上的例子可以在浏览器中观看。用“热点图片”插件生成的HTML文件可以再用该插件重新打开并再次编辑。一般我们会先用GIMP打开图片,打开“热点图片”插件,然后在插件的文件菜单中用“打开”命令打开保存的HTML文件。
图(9.7)
上图显示我们用上面的方法重新打开9.6中的HTML文件后的状况。可是,我们并没有事先打开图片文件,而是打开了一个空白图片。这样,我们会在空白背景上清楚地看到我们定义的热点。这样做可能没有什么实际意义,可是这种展示的方法挺有意思:)。注意热点列表中10个州各有一条记录。点击任何一条记录就会选中对应的热点,如图中的阿拉巴马州。
最后,我想提醒您,你可以用浏览器打开您制作的HTML文档,以确认您制作的文件是正确的。如果需要,您也可以手动用文字编辑器修改生成的HTML文件。
图(9.18)
上图显示用netscape navigator察看我们的制作的效果。注意当我们把鼠标放在佛罗里达州上时,鼠标会变成手状,说明这里已经是一个超级链接了。
“热点图片”插件还有很多功能。这本书无法对众多插件做深入讨论,可是,大多数功能并不难理解。只要多试试各种选项,您一定能对这个插件有更深刻的理解。 |