[翻译]标记语言和样式手册 Chapter 14 图片替换(6)
作者:zhaozy 来源:3user.com 发布时间:2008-02-18 12:56:00
技巧延伸
在这个单元中,首先先来看看两个真实世界里或许能正确应用的图片替换技术的地方,首先,我们先来看看标识(logo)替换的有用技巧,这是推广FIR技巧的(方法A)的Douglas Bowman最先告诉我的.其次,我会分享Fast Company的网站是如何不使用JavaScript单靠图片替换技术做出导航系统的.
标识替换
在本章开始的时候讨论了如何用CSS把文字替换成图片.这些方法都有些特定的缺点,但是这些缺点陷在一种特殊情况下会完全消失:那就是用图片.....替换掉另一个图片.
但是为什么会想这么做?
Hi-Fi和Lo-Fi
以图片替换掉另一个图片的理由之一,可能是为了提供不同的网站标识,一种给完全支持CSS(能正确处理background属性)的浏览器,另一种则是给老旧浏览器,手持设备,屏幕阅读器等.
如果你的标识有配合CSS设计的透明颜色,特殊颜色时,这个方法尤其便利,你或许会想显示Lo-Fi版本的标识,让页面在CSS关闭或者不支持的时候仍然有不错的外观.
示例
为了避开著作权律师的纠缠,我将再度以个人网站作为示例.它不仅替换了标识图片,同时还考虑到首页之外的其他页面,启用CSS版的标识仍能作为超链接点击,连回首页.
一起来看看我在首页上标记标识所使用的源代码,以及其他页面使用的源代码.
这是首页的:
<div id="logo">
<span><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></span>
</div>
其他所有页面的标识都能点击,将使用者带回到首页:
<div id="logo">
<span><a href="/"><img src="/images/logo_lofi.gif" width="173"
height="31" alt="SimpleBits" /></a></span>
</div>
一对标识
图14-6和14-7是我使用的两个标识,前面这个是在未使用样式的页面里显示于行内的版本(Lo-Fi),而后面这个则是在现代浏览器之内被CSS引用的图片(Hi-Fi).
图14-6 未启用CSS的浏览器会看到的logo_lofi.gif
图14-7 启用CSS的浏览器会看到的logo_corn.gif
CSS内容
把这些东西搭在一起,加上CSS使每件事成为可能!
首先,把行内图片的宽度设为0将它隐藏起来,记得不要用display属性隐藏lo-fi标识,这样屏幕阅读器才比较有机会正确念出隐藏图片(的alt文字内容):
#logo img {
display: block;
width: 0;
}
接着,为我偷偷加上的<span>标签以background属性指定hi-fi标识图片.对,这很没意义,语义上也很没意义,但是这次就当成例外吧.
#logo span {
width: 173px;
height: 31px;
background: url(../images/logo_corn.gif) no-repeat;
}
你应该发现了,我们该做的所有事情就是把高度,宽度设成与替换用的图片相同,同时把背景图片指定为hi-fi版.
猜你喜欢
- 在浏览天极RSS订阅页面时,可以看到天极网为方便用户定制站点内容而设立的各个RSS频道。浏览者通过订阅不同的RSS(可同时订阅多个网站),就
- 用ASP实现搜索引擎的功能是一件很方便的事,可是,如何实现类似3721的智能搜索呢?比如,当在搜索条件框内输入“中国人民”时,自动从中提取“
- 今天看看那些知名的Logo,可能你没注意过,它们也是一直在变化,有的还挺雷人的!先从时尚的苹果开始吧,苹果也有土的时候。1976年那第一个L
- 通配符:通配符描述示例%包含零个或更多字符的任意字符串。WHERE title LIKE '%computer%' 将查找处
- 第一章:日志管理 1.forcing log switchessql> alter system switch logfile;2.f
- 创作思路:主要还是想尝试做点稍微不同于整天为迎合客户而做的东西.然后闲时就开始构思,比如坐车,走路什么的.看到有一些复古手机的相关图,就想到
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 22 - Fx.Elements通过
- 1)按笔画排序select * from Table order by nlssort(columnName,'NLS_SORT=S
- 许可和分发权限Access 2003 Developer Extensions随附的许可协议简化了解决方案或代码段的分发过程。这些协议包括免
- 利用空闲几天把《JavaScript权威指南》安静的读了一篇。真是一本好书呀!呵呵,这句话见的太多了。好在什么地方呢?听我慢慢道来。从开始接
- 若数据库是sql server,我以前为了返回插入记录的id,一般是用下面的存储过程:程序代码 create procedure&
- 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那
- 前言:HTML5和CSS3的时代到来了,新版2011版淘宝网首页已全部使用HTML5,拥抱变化才是王道。为之漫笔翻译的很好,看了一遍后,感觉
- 一、分工和流程在土豆网,以项目开发为核心,谁都可以带项目,担任项目经理。一个典型的土豆网项目中,当进入正式开发阶段,通常参与者包括:1名设计
- 概述:本控件使用 html+css+javascript模拟HTML内置的select元素,实现其部分方法与属性,也增加了一部分功能,并且从
- 由于ACCESS本身没有提供在窗体中添加一个命令按钮实现打开通用对话框的控件,所以大家必须通过编写相关的宏才能实现此功能,但是编写出的宏限制
- AdobeAdobe公司的标识1982年,40多岁的程序员约翰·沃诺克(John Warnock)和查尔斯·杰斯克(Charles Gesc
- 最近在学习正则,一些比较有用的东西怕忘记,记下来,比较乱,想一条记录一条:正则表达式在线测试//匹配文本,这个偶尔比较好用,但是要小心字符中
- 我们可以用鼠标把Dreamweaver的层在页面内拖动,但要全屏拖动就困难了,下面是一种实现的方法:制作步骤:一、准备图片,取名/file/
- 最近由于单位数据库硬盘空间不足,整理的时候查了许多文章,也进行了测试,整理后得出一些经验供大家参考。首先,在网上看到一篇文章,如何Shrin