归纳

仔细研究了三种常用的图片替换技巧,从最早的Fahrner图片替换法开始,接着是它的两种变形,虽然都不是完美的做法,但是Mike Rundle之类的技巧已经非常接近完美了.应该能在现实世界里应用,只是必须要注意一些陷阱和缺点.

让我们分析这三个方法的主要差异:

方法A:

• 需要一组额外的没有意义的<span>标签.
• 在这段文字撰写时,常被使用的屏幕阅读器会被display属性影响,不念出任何内容(根据Joe Clark的研究结果而知)
• 在"关闭图片显示,启用CSS"的时候,什么都看不到.

方法B:

• 不需要额外标签
• 屏幕阅读器应该能正常念出内容.
• 要为IE5 for Windows使用盒模型Hack.
• 在"关闭图片显示,启用CSS"的时候,什么都看不到.

方法C:

• 不需要额外标签
• 屏幕阅读器应该能正常念出内容.
• 在"关闭图片显示,启用CSS"的时候,什么都看不到.

现在所有常见的方法都共享了最后一个缺点,但随着更多开发者持续研究图片替换的技巧,相信有一天会看到能够满足所有人的解决方法.

在那之前,还有几个图片替换的实际应用概念值得一提,将在本章稍后的"技巧延伸"单元中讨论其中的两个.

有个重点值得一提:有位遵照标准的设计师Dave Shea不断地观察图片图换技术的最新发展,同时维护了一份组织完善的页面,记载了不少相关技巧.一定记得看看Dave的"Revised Image Replacement" (http://www.mezzoblue.com/tests/revised-image-replacement/).

技巧延伸

在这个单元中,首先先来看看两个真实世界里或许能正确应用的图片替换技术的地方,首先,我们先来看看标识(logo)替换的有用技巧,这是推广FIR技巧的(方法A)的Douglas Bowman最先告诉我的.其次,我会分享Fast Company的网站是如何不使用JavaScript单靠图片替换技术做出导航系统的.

标识替换

在本章开始的时候讨论了如何用CSS把文字替换成图片.这些方法都有些特定的缺点,但是这些缺点陷在一种特殊情况下会完全消失:那就是用图片.....替换掉另一个图片.

但是为什么会想这么做?

Hi-Fi和Lo-Fi

以图片替换掉另一个图片的理由之一,可能是为了提供不同的网站标识,一种给完全支持CSS(能正确处理background属性)的浏览器,另一种则是给老旧浏览器,手持设备,屏幕阅读器等.

如果你的标识有配合CSS设计的透明颜色,特殊颜色时,这个方法尤其便利,你或许会想显示Lo-Fi版本的标识,让页面在CSS关闭或者不支持的时候仍然有不错的外观.

出处：蓝色理想
责任编辑：bluehearts

上一页 标记语言——图片替换 [4] 下一页 标记语言——图片替换 [6]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。