关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

网站中特殊的图像,服务器图像映射

作者:佚名   时间:2014-02-27   分享到:

使用图像和图标来代替链接内容中的文字逐渐成为一种时尚。例如,可以使用手指图标来左海代替“下一页(next)”等文字链接。到主页的链接如果不使用小房子图案,就会被认为是不完整的。到搜索工具的链接现在必须要包含一个放大镜、问号或望远镜等图案。而且,所有的小广告也都变成了闪烁的GIF动画。
    不要因为可以在文档中插入图像,就插入大量的图象。再次强调,是否需要插入图像取决于上下文。如果你本人或者文档的读者无法一眼看出链接和当前文档之间的关系,那么你的链接就是失败的。只对链接使用少量、一致的可爱图像,并仅以这种方式来帮助和引导读者浏览文档中的重要信息。同时还要注意的是:由于读者可能来自世界各地(甚至可能来自外星球),所以你要保证所使用的图像在不同的文化背景下不会产生歧义(听说过在美国常用的OK手势对日本人意味着什么吗?)。
    为一系列页面创建一致的图像是一件令人生畏的工作,这项工作必须要在那些从正式的可视化设计学校毕业的专业人员的帮助之下才能完成。请相信我们,那些能够写出漂亮的代码和熟练使用XHTML的人很少会创建美丽的、引人注目的图像。因此,找到一个好的平面设计师会使页面和读者都受益匪浅。
对鼠标敏感的图像
    一般情况下,放置在锚中的图像只是作为锚内容的一部分。浏览器可能会以某种特殊的方式来改变图像(通常是使用特殊的边框),以提醒浏览者该图像是一个超链接。但是用户单击图像的方式并没有改变,还和单击文本超链接时一样。
    HTML和XHTML标准提供了一种特性,允许在同一副图像中嵌入多个不同的链接。单击图像的不同区域可以使浏览器链接到不同的目标文档。这种对鼠标敏感的图像被称为图像映身(image map),它开创了多种创建链接的样式。
    创建图像映身的方式有两种,分别是服务和客户端图像映射。前一种图像映射是在<img>标签的ismap属性中设置的,它要求访问服务器和相关的图像映射处理应用程序。后一种图像映射是用<img>标签的usemap属性创建的,它要和对应的<map>和<area>标签同时使用。
   将鼠标在连接图像中的位置转换成到另一个文档的链接,这种转换发生在用户的机器上,所以客户端的图像映射不需要专六的服务器连接,并且可以在没有Web的环境下实现,例如,在本地硬盘驱动器上或基于CD-ROM的文档集之中。
服务器端注意事项
    在利用ismap属性使用对鼠标敏感的图像映射时,会要求浏览器仅向服务器传送URL和 鼠标坐标。将这些坐标转换成特定的文档是由文档服务器处理的。转换过程根据服务器的不同而不同,这一点在HTML或XHTML标准中并没有定义。
    你需要向Web服务器管理员咨询,可能还需要阅读服务器的资料,这样才能决定创建和编写图像映射的方法。大多数服务器自带了一些能够处理图像映射查询时,都使用包含图像映射区域和图像映射URL所引用的相关超链接的文本文件来处理。
这里有一个关于图像映射文件的示例,它描述了我们的示例图像中的敏感区域:

# Imagemap file=toolbar.map
drfault    dflt.html
circ 100,30,290,500 link1.html
rect 180,120,290,500link2.html
poly 80,80,90,72,160,90link3.html

    图像映射的每个敏感区域都是由几何形状和以像素为单位定义的坐标描述的,例如,圆形用它的圆心和半径来描述,矩形使用左上角和右下解的坐标来描述,多边形使用它的各个顶点的坐标来描述。所有坐标都是以图像的左上解(0.0)为参照。每种形状都有其相对的URL。
    图像映射处理应用程序一般会按照图形在图像文件中出现的顺序测试每种形状,如困用户鼠标的X和Y坐标位于某个形状的边界之内,就会向浏览器返回对应的URL所指定的文档。这意味着形状可以重叠;而具体哪个形状会生效,则取决于它们在图像文件中出现的先后顺序。同样,整个图像无须被敏感区域全部覆盖:如果传送的坐标没有位于任何一个指定的形状边界内,那么就会向浏览器返回默认文档。
    这里仅仅是一个示例,展示了处理图像映射可能采用的方式,以及该处理过程所需的辅助文件。具体情况请向网络管理员咨询,并参考服务器使用手册,以了解如何在自己的文档和系统中使用网站服务器端图像映射。



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/news/20151229/n6651.html

上海联楷网络新闻