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

一张图片,三种状态

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 标签导航效果,示范三种不同状态.