第八讲 图片超链接

除了文字以外，图片也可以建立超链接，而且还可以利用热区功能为图片的不同位置建立不同的超链接。图片的热区与文字的热区文本相似，它是图片上的一部分，单击这一部分可以打开相链接的网页。
下面我们一起看一下如何为图片建立超链接。
一、为整个图片建立超链接
　　在图片上建立超链接与在热点文字上完全一样：选中图片，然后单击常用工具栏上的超链接按钮 ，在“创建超链接”对话框的URL栏中输入（也可用“浏览”方法选取）要链接的对象文件的URL。下面举一给本地网站中的主页“index.htm”添加“友情链接”的例子。
　　一般网站建立时间长了，都会和其它网站进行“友情链接”。这些链接的热点可以是文字，也可以用图片。很多网站都有所谓 LOGO（图标）的小图片，用作自己网站的标志提供给对方。
　　1）打开FrontPage，并打开“D:/网页练习”本地网站中的主页文件“index.htm”
　　2）在主页上开辟一个“友情链接”区域，并插入几个网站的 LOGO 。
　　3）选中第一个网站（老顽童网站）的图标。

 

被选中的主页上的超链接点文字

　　4）单击常用工具栏上的超链接按钮，得到“创建超链接”对话框，如下图。

“创建超链接”对话框

　　5）在“创建超链接”对话框的URL中输入老顽童网站的网址“http://www.oldchild.net”，目标框架设为“新建窗口”。
　　6）单击“确定”按钮后，完成设置。重复步骤3到5，完成其它几个网站的“友情链接”。预览这个主页。将鼠标移到某一图标上，鼠标指针变成手形，单击后，对应的网站主页被打开。

　　和以前讲过的为热点文字建立电子邮件超链接的一样，我们也可以为图片添加电子邮件超链接。这里就不多重复了。
二、利用图片映射建立超链接
　　在网上浏览网页时，我们常常遇到这样的一种情况：在某些网页中，一幅图片的不同位置可以链接到不同的网页，单击相应的地方，即可链接到指定的网页上去，这将会吸引更多的网友。这种技术叫做图片映射。
　　FrontPage提供了非常简便的在一张图片上制作多个超链接的制作工具，这就是图片工具栏中的“长方形热点”、“圆形热点”和“多边形热点”按钮。利用鼠标在图片上拖曳，我们就可以直接将图片划分出许多不同的区域并制作出多个超链接了。
　　下面我们就用图片映射技术制作一个“全国老年大学网站地图”。
　　1、打开D：盘的“网页练习”网站，在其中开启一个新的网页，输入标题文字“全国老年大学网站地图”，换行后插入一幅全国地图图片（“506.gif”）。
　　2、选中（单击）整幅图片，这时，图片工具栏在窗口下方自动出现。单击工具栏上的“多边形热点”按钮，如下图3所示。有时，“图片工具条”不会自动跳出，选择菜单“视图＞工具栏＞图片”，即可让“图片工具条”出现。

在网页上单击“多边形热点”按钮

　　3、然后拖动鼠标在图片上沿安徽的区域划一个多边形（注意：画多边形时应拖出一小段直线，松一下左键，再改变方向拖第二段，…，直到最后完成封闭图形），正好将安徽晚围在当中，松开鼠标，会出现如下图所示的“创建超链接”对话框。在对话框中输入安徽老年大学的网址：“http://alx.ahedu.gov.cn/”，单击“确定”按钮，即完成设置。

“创建超链接”对话框

　　单击“预览”选项卡，将鼠标移动到地图上安徽的位置，鼠标指针变成手形。单击鼠标，安徽老年大学的主页将被打开。
　　用同样的方法，我们可以为地图上的其他区域建立热区，将它们与其他省份的老年大学主页相链接。然后以文件名“gdlndx.htm”（“各地老年大学”）保存在“网页练习”网站中。
　　若图片中的区域太小，无法使用图片热区映射时，可采用文本热区映射来实现超链接。单击“图片”工具栏上的“文本”按钮，在GIF图片上合适位置画出一个文本框，并在其中输入相应文字。选中此文本框后，单击“插入”菜单，在下拉菜单中选择“超链接”命令，打开“创建超链接”对话框。在对话框中输入URL，即完成设超链接置。
三、图片和超链接中的路径问题
　　网页中的图片文件和超链接对象和网页文件有一个相对位置关系。由于网页的编辑是在本地计算机中完成的，而客户访问的网页文件则是放在因特网服务器上。若处理不好，往往在本地计算机中能正常预览的网页上传到服务器以后会看不到图片或链接不正常，这就需要特别注意路径问题。
　　所谓文件的路径就是文件在计算机中的位置。而对因特网上的文件则还需考虑服务器的IP地址或域名。
　　文件路径有相对路径和绝对路径两种：
　　1、相对路径
　　就是图片文件（或超链接对象）所在位置相对于网页所在位置的关系。同一文件夹中的文件名前不加任何路径说明。若在其下一级文件夹中，则文件名前加文件夹名及“/”符。该符号是子目录（文件夹）的分割符。
　　例如前例中的“gdlndx.htm”文件在D：盘的“网页练习”文件夹中（D:/网页练习），而全国地图图片文件“506.gif”在D：盘的“网页练习”的“images”文件夹中（D:/网页练习/images），也即“gdlndx.htm”网页所在位置的下级文件夹“images”中。所以该图片的“图片属性”对话框中“图片源”为“images/506.gif”，即表示了该图片文件相对于网页的位置。

　　若目标文件在网页文件的上一级文件夹中，可用“../”表示。
　　例如老顽童网站的主页文件“index.htm”在“oldchild”文件夹中，在“oldchild”文件夹中还有“老年生活”等栏目的网页文件（“life.htm”等）。在网站的“老年乐园/老年生活”栏目（文件夹“oldchild/oldhappy/life”）中有一网页“美食文谈”（网页文件为“mswt.htm”），如下图所示：

oldchild/┬oldhappy/─life/┬mswt.htm 　　　　 │　　　　　　　　│ 　　　　 ├index.htm　　　 ├…… 　　　　 │ 　　　　 ├life.htm 　　　　 │ 　　　　 ├……

　　则在“老年生活”网页中对“美食文谈”的链接路径为“oldhappy/life/mswt.htm”；而在“美食文谈”网页中的“回首页”的链接路径为“../../index.htm”。

　　2、绝对路径
　　即与网页所在位置（当前目录）无关，从磁盘的根目录或因特网上站点服务器的域名地址开始的文件路径。如“F:/oldchild”、“http://oldchild.nbc.net.cn/oldhappy/life/mswt.htm”等。
　　一般在本地计算机上的图片文件或链接对象使用相对路径，对因特网上的网站或图片文件使用绝对路径。若本地计算机上使用绝对路径就会发生路径错误。如前例中在“美食文谈”网页中的“回首页”的链接路径为相对路径“../../index.htm”。若将它改成绝对路径“F:/oldchild/index.htm”，则在本地计算机中预览时能正确回到主页，但上传到因特网服务器上以后就不能正确回到主页，因为在服务器上的正确绝对路径是“http://oldchild.nbc.net.cn/index.htm”。
　　一般讲，将所有要用到的图片及其它辅助文件都复制（导入）到本地网站中，并且始终在打开的本地网站制作网页不会产生路径错误。但若在其它文件夹中做好网页再拷贝到本地网站中，就容易发生路径错误。

【练一练】
　　1、打开本地网站“网页练习”。分别打开其中的所有子网页，在这些网页底部都插入一个同样的小图片作为“回首页”的标记，并将它与主页“index.htm”链接起来。
　　2、设计一个利用图片映射技术在一幅图片的不同位置链接到不同的目标的网页。