易用的图片标签翻转效果
说这个特殊案例"易用"可能有点不符事实,我为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方法在分开开 / 关图片的时候可能会遇到的闪烁问题,同时我们也不必预先载入任何图片了.
出处:蓝色理想
责任编辑:bluehearts
上一页 标记语言——图片替换 [6] 下一页 标记语言——图片替换 [8]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|