标记语言——图片替换(5)

归纳

仔细研究了三种常用的图片替换技巧,从最早的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/).