位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 14 图片替换（8）

[翻译]标记语言和样式手册 Chapter 14 图片替换（8）

作者：zhaozy　来源：3user.com　发布时间：2008-02-18 12:56:00　

标签：样式,图片,标记,css,手册

易用的图片标签翻转效果

说这个特殊案例"易用"可能有点不符事实,我为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="https://img.aspxhome.com/files/">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="https://img.aspxhome.com/files/">Archives</a></li>
</ul>

接着用Photoshop(或是你熟悉的图片编辑软件)制作一些标签图片.

第一页上一页 6 7

9 10 下一页

投稿

[翻译]标记语言和样式手册 Chapter 14 图片替换（8）

猜你喜欢