标记语言——图片替换(7)
易用的图片标签翻转效果
说这个特殊案例"易用"可能有点不符事实,我为Fast Company网站编写的图片标签导航系统与本章稍早时讨论的图片替换技术,同样有个缺点,那就是"关掉图片显示,启用CSS"的使用者什么都看不到.
然而,在你必须使用图片制作导航内容的时候(不管是为了克服空间限制还是字体要求),这个做法就很有价值,值得一看了.
易用性的部分是指:最后要以图片制作导航标签,但是标记源代码仍然是灵活的,轻巧的无序清单,所有浏览器,电话,PDA应该都能正常使用.
一起来看看整个方法是怎么完成的.
问题
当我还是Fast Company网页小组的成员时,我们一度需要在FC的顶部导航列里放进更多的项目,但是空间已经使用完了.先前导航列表几元到吗是以简单,加上样式的无序清单制作的,但是在800*600视窗解析度时,剩下的空间甚至不足以再放进一个项目.
解决方法
我决定组合并修改捷克作者 Petr Stanicek(又称 Pixy)的"Fast Rollovers, No Preload Needed"(http://www.pixy.cz/blogg/clanky/cssnopreloadrellovers/)做法,以及本章稍早的时候提过的Leahy / Langridge图片替换法,以便作出易于使用,不使用JavaScript的图片标签翻转效果(图14-11)
图14-11 FastCompany.com的标签导航系统,2004年2月的情形
这是怎么办到的?
标记源代码:一个清单搞定全部
我希望继续在源代码里使用简单的无序清单制作导航列.本书前面已经有不少内容提到过以清单制作导航列的好处了:他们很简洁,而且能在文字浏览器,屏幕阅读器,PDA,手提电话等正常使用.
以下是清单的本来面目(我删去了一些项目以便进行示范):
<ul id="nav">
<li><a href="/" class="selected">Home</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/magazine/">Magazine</a></li>
<li><a href="/articles/">Archives</a></li>
</ul>
简单明了,现在来为每个<li>标签加上唯一的id,以便稍后用它们变出一些花样来(就是用漂亮的图片换掉每个标签乏味的文字):
<ul id="nav">
<li id="thome"><a href="/" class="selected">Home</a></li>
<li id="tguides"><a href="/guides/">Guides</a></li>
<li id="tmag"><a href="/magazine/">Magazine</a></li>
<li id="tarchives"><a href="/articles/">Archives</a></li>
</ul>
接着用Photoshop(或是你熟悉的图片编辑软件)制作一些标签图片.
一张图片,三种状态
Pixy卓越的快速翻转效果,精华在于每个导航项目制作一张同时包含普通状态,鼠标滑过状态,激活状态的图片.稍后,我们将以CSS改变background-position,在适当的时候显示各个状态.
这个方法终结了以往使用JavaScript替换图片,预先载入许多图片的做法,真是个节省制作时间的好办法,下载速度也变快了许多.
图14-12 是一张我为Fast Company网站导航制作的图片.每个状态都是20像素高,整张图片的高度是60像素.顶部20像素是普通状态,接着20像素则是鼠标滑过状态,最下面20像素则是激活状态(同时也用来表现"你在这里"的效果).所使用的每个标签都有一张类似的图片.
图14-12 一张包含三种状态的图片
使用一张图片包含每个状态,让我们能扔掉传统的制作这类效果是需要加上的丑陋的JavaScript内容,以改用简单的CSS规则作出鼠标移动效果.这样不错.它同时也排除了其他CSS方法在分开开 / 关图片的时候可能会遇到的闪烁问题,同时我们也不必预先载入任何图片了.
CSS内容:这是被施了魔法的地方
首先将设定所有导航项目共享的规则,如此就不必为每个标签重复相同的规则.接着为每个清单项目id分别加上独立规则,为<li>指定专属的background-image与width,每个标签只有这两个属性不一样.
CSS内容大致如下:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -20px;
}
#nav a:active, #nav a.selected {
background-position: 0 -40px;
}
前面这段CSS会把清单样式与内补丁去掉,把清单转成水平,同时隐藏超链接里的文字.留意:hover与:active规则.这在每个#nav内的<a>都通用,不必为每一个项目分别重复这些规则.
接着为我想持续突出显示标签指定"selected"类,提示读者目前在网站内的位置.这些规则与:active状态共用.
你或许也会注意到我们重复为#nav和#nav li指定了list-style:none;与display:inline;规则这是为了讨IE5 for Windows欢心,在完美的世界里,只要为#nav指定一次这些规则就够了,当然这不是现状.
接着,再为每个id加上规则,指定background-image和width,以下是一个实例:
#thome a {
width: 40px;
background: url(home.gif) top left no-repeat;
}
当然,每个标签都有一段类似的声明.
成果
图14-13显示了标签在普通状态,鼠标滑过状态,选定状态下效果.如果你想看它实际运作的效果,可以看看SimleBits上面的示例于源代码(http://www.simplebits.com/bits/tab_rollovers.html).
图14-13 标签导航效果,示范三种不同状态.
为什么要用它?
- 它非常轻量,标记源代码里不过是个无序清单.
- 它易于使用: 利用Stuart的方法,我们确信屏幕阅读器能够念出文字链接.
- 不用JavaScript:不要预先载入图片,或是为每个状态分别制作图片.也不需要额外的JavaScript控制鼠标滑过效果.谢拉!Pixy兄.
- 它很美观:把文字放到指定的位置颇需技巧,这让我们可以直接使用[漂亮的图片.
但是等等,文字不会变化大小!
遵照Douglas Bowman的好建议,同时回应易读性问题,无法调整图片大小问题,我更进一步制作了第二组文字放大的标签图片.然后我就能在现存的medium和large替换样式表里面覆盖这些规则.我用Paul Sowden的样式表切换器启用替换样式表,先前在第十章"技巧延伸"中提到过.
覆盖的样式规则与先前的代码几乎相同,只修改了图片位置,宽度:
#thome a {
width: 46px;
background: url(guides_lg.gif) top left no-repeat;
}
图14-14显示了Fast Company网站上放大过后的标签效果,你能发现水平距离变窄了,而垂直大小与原始标签一样.但是,加上了放大文字,标签图片大小的功能之后,我们不仅帮助了视力不佳的使用者,同时仍然遵守现有的设计细节.
图14-14 用替换样式表放大图标图片的导航条
兼容性
这个方法经过测过,应该同时能在所有5.0版之后的浏览器上正常运作.
针对Fast Company的网站,我选择用position:absolute指定#nav的位置,以便完美对齐所有元素,让标题区域的背景色彩显示出来.这个方法效果十分完美,除了Opera7 for Windows以外,它需要为绝对定位元素指定宽度.
这没什么问题;只要为#nav指定所有图片的宽度总和就好了:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
width: 201px;
}
这下我们能够睡个好觉了,Opera的拥护者也高兴了.
结论
现在你已经跟上图片替换技术的最新发展了,虽然还没有完美的解决方案,我仍希望你已准备好相关知识,这些原则十分重要,值得理解,实验一番.
除此之外,通过示范了两个真实的图片替换技巧使用法,我希望能使你开始前进,而你...对,就是你...会是那个发现下一个最佳做法的人,运气和名望正等着你!
这本书的翻译已经进入尾声了,还剩下最后两章,估计明天就能全部完成,抄书比读书更能深入人心,哈哈,受益匪浅啊