电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> HTML>>高级HTML技巧-服务器端image map:

高级HTML技巧-服务器端image map

来源:远方网络 | 2005-6-3 22:01:09 | (有2407人读过)

服务器端image map

如果你想让你的image map 在更多的浏览器上都能正确运行的话,就使用服务器端image map,它甚至能很好地与早期的浏览器兼容。它唯一的一个不利之处是它比客户端image map要慢许多。

建立一个服务器端image map需要以下三步:

建立图象

在HTML文件中使用正确的标识符

建立image map

下面将对此进行详细的讨论。

你可以在image map中使用任何类型的图象,一般使用GIF,但你也可以使用JPEG或PNG格式的图象,这对于image map来说没有什么差别。你可以用任何一种支持网页图象格式的作图软件来建立你的图象。

在建立图象时,要确保它的尺寸足够大,能使用户轻松地用鼠标点击不同的部位。如果你建立的图象太小,用户点击正确的区域会很吃力,这会降低用户的兴趣。同时也不要使图象太大,否则图象调入浏览器会非常地慢。Internet上有很多网点在它们的主页上都放置了过大的image map(社团的网点更是这样)。你的图象很具有艺术性,但如果要花几个小时来读入它的话,就没有人愿意去看它。

建立服务器端image map的第二步是在HTML文件中包含必需的HTML标识符,你可以使用<IMG>的ISMAP属性来指定一幅图象为服务器端image map。下面是个例子:

<HTML>

<HEAD> <TITLE> Server-Side Image Map </TITLE> </HEAD>

<BODY>

<A HREF=“/somedirectory/mymap.map”> <IMG SRC=“myimage.gif” ISMAP> </A>

</BODY>

</HTML>

这个例子假设你已经建立了一幅名为myimage.gif的GIF图象,这幅图象是用来作为image map的。ISMAP属性通知浏览器将这幅图象解释为image map而不是一般的图象。

你可以使用<IMG>标识符的所有属性,例如,你可以用BORDER=0属性来防止在Netscape Navigator上显示时在图象周围画一个边框。

建立一个服务器端image map的最后一步是建立一个地图文件。地图文件是具有扩展名为 .map的一般文本文件,你可以使用任何一种普通的文本编辑软件来建立地图文件。在上例中,注意图象是包含在<A>标识符中,然而HREF属性不是通常那样指向一个HTML文件,而是指向一个名为mymap.map的文件,这就是个地图文件。

一个地图文件将图象中不同的区域与不同的网络地址(URL)关联起来。例如,假设你的图象上有一个报纸的图标,还有一个聊天室的图标,如果有人点击了报纸图标,你希望浏览器调入新闻的网页,如果点击了聊天室的图标,你希望调入聊天室的网页。要建立这种图象与网页间的联系,你必须使用地图文件。

Internet Information Server(本书假定你在使用的Web服务器)能识别NCSA和CERN格式的地图文件。下面的例子是一个NCSA格式的地图文件:

# WWW NCSA Image Map file for‘myimage.gif ’

default /home.cfm

rect /news.cfm 0,0 100,100

rect /chat.cfm 101,0 200,100

在这个地图文件中,符号#表明一句注释的开始,你可以在#号后输入任何你想要的文字。在此例中,注释中说明了与地图文件相关的图象文件名。当你有多幅image map时,这是个好的习惯,通过在地图文件中指明图象的名字,你可以记住哪个图象与哪个地图文件相关。

代码rect用来将图象中的一个矩形区与一个HTML文件地址相关联,例如,news.cfm文件与坐标为0,0和100,100定义的矩形区相关联。这个坐标指明了图象上的一个区域,左上角坐标为(0,0),右下角坐标为(100,100)。当用户点击了图象上的这个区域后,HTML文件news.cfm就会被调入浏览器。

最后,代码default指明了当用户点击image map上未被定义的区域时,浏览器应当调入的HTML文件。在此例中,如果用户点击了上述定义的两个矩形区域之外,浏览器就会调入home.cfm文件。

在这个地图文件中,定义的区域是矩形的,但是你也可以使用别的形状,例如圆形、多边形,甚至是单独的点(如果你觉得有必要的话)。下面的例子使用了所有这四种形状的区域:

# WWW NCSA Image Map file for‘myimage.gif ’

default /home.cfm

rect /news.cfm 0,0 100,100

circle /chat.cfm 50,50 20

poly /help.cfm 200,0 400,0 400,100 200,100 200,0

point /NeverGetHere.cfm 500,6

在这个地图文件中,代码circle在地图上定义了一个圆心在(50,50),半径在20的圆形区域,poly定义了一个由一系列的点(给出X、Y坐标)组成的多边形区域,最后point定义了一个单独的点,要想调入HTML文件NeverGetHere.cfm,用户必须点击图象上坐标为(500,6)的单个点。

注意

使用多边形在image map上定义区域时要小心,早版本的Internet Information Server不能处理超过100个点组成的多边形(这将会造成禁止进入的错误)。现版的服务器能处理多达160个点的多边形,但多于这些的点就会被忽略。

你可能已经注意到在上述地图文件中由rect和circle定义的区域是重叠的。在两个区域重叠的情况下,在地图文件中首先定义的区域会起作用,因此在此例中,重叠区域会执行矩形区的功能,news.cfm文件将会与矩形和圆重叠的区域相关联。

注意

一些作图软件,如Fractal Design Painter,可以自动地为你产生地图文件。另外,许多共享软件和免费软件可以用来建立地图文件,可浏览http://www.shareware.com或http://www.tucows.com。

当你画好了图象,包含了必需的HTML标识符,并建立了地图文件后,你就有了一个服务器端image map,你可以在一个网页上包含任意多的image map,而且你也可以在多个网页上反复使用同一幅图象和地图文件。例如,如果你想在多幅网页上包含同一个导航条时,就可以这样做。
HTML热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2024 电脑爱好者 版权所有 备案号:鲁ICP备09059398号