无延迟翻滚的图形/CSS混合风格的按钮

发布时间：2013-09-19 11:33:46来源：阅读（1256）

在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。

相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面建立和载入一个图像，而不是为每一个按钮建立各自的图像。

同一个图像可以使用在网页所有按钮的背景。按钮的文本标签都是简单的CSS风格文本。 预先载入的

图形/CSS混合风格的为数不多问题之一是对翻滚效果有所限制。使用这一技术的最简单的方法是，指定CSS风格文本的翻滚效果，并使用所有翻滚状态(rollover states)的相同按钮外形图像。这可以给你带来快速、简洁的翻滚效果，但在一定程度上限制了你的开发选项。

你也可以建立一些可交替使用的按钮图像并构建你的CSS规则，以为不同的翻滚状态改变背景图像。然而，这些方法给你带来更多灵活的设计，但当浏览器首次载入图像文件时，这些可交替使用的铵钮图像会出现延迟现象(除非你采用预先载入按钮图像的方法)。

预先载入图像技术已被人熟知，而且也被人们所接受。问题是预先载入图像增加了网页载入和出现在访问者浏览器的时间。用户访问的第一二分钟非常关键，所以你无论如何都必须使得网页的初始化更加快速。使用图形/CSS混合按钮可以减少图像预先载入的时间，当然如果预先载入能够消除，页面的初始化则更加快速。

  没有延迟的翻滚──不使用预先载入图像

我已经找到一种创新的方法，这种方法可以满足不同的翻滚状态的可交替使用的按钮图像，而其中不需要任何图像文件的载入。我第一次接触这一技术是在网络设计者捷克人Petr Stanicek的站点上的文章上发现的。

为了获得一个典型的按钮翻滚效果，你通常需要建立三个独立的图像，如图A所示。其中一个是普通的按钮，一个是悬浮状态，以及一个是激活状态。普通按钮的图像文件将成为初始化页面载入的一部分，但其它两个图像将被分开地载入，这样使得它们能够在用户的浏览器中得以使用。

 
图A

无预先载入翻滚技术通过结合所有三个按钮外表图像而成为单一图像文件而得以实现，如图B所示。然而，不需要为每一翻滚状态指定不同的背景图像文件，你指定的是合成图像的位置偏移量。在页面初始化载入过程中，合成图像文件能够自动地载入，所以无需要预先载入；而且，在浏览器获得不同图像文件过程中也没有时间上的延迟。

 
图B

超大图像与背景图像位置偏移的结合使用可以使你有选择性地为每一按钮状态显示图像的不同部分。按钮文本的CSS框尺寸决定着显示在浏览器的背景图像的百分比。

对于这一技术，你必须清楚按钮外表的确切水平和垂直尺寸，并正确使用这些尺寸，才能建立图像文件和按钮的CSS规则。 一个使用过程的范例

这里是一个代码范例，范例的无预先载入的翻滚技术应用于图形/CSS混合按钮。在这种情况下，按钮文本以无顺序列表而标记，三个外形美观的按钮包含在具有ID menu的div中。首先，CCS为：

div#menu {
    height: auto;
    width: 150px;
}
div#menuli {
    height: 30px;
    width: 100px;
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 30px;
    list-style-type: none;
    background-image: url(images/buttons.jpg);
    background-position: 0px 0px;
}
div#menuli a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #FFFFFF;
}
div#menulia:link {
    color: #FFFFFF;
    background-image: url(images/buttons.jpg);
    background-position: 0px 0px;
}
div#menulia:visited {
    color: #CCCCCC;
    background-image: url(images/buttons.jpg);
    background-position: 0px 0px;
}
div#menulia:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(images/buttons.jpg);
    background-position: 0px -30px;
}
div#menulia:active {
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(images/buttons.jpg);
    background-position: 0px -60px;
}



这里是这三个按钮的HTML：





• Button 1


• Button 2


• Button 3








在以上代码中，请注意到div#menuli规则指定了按钮的高度和尺寸。指定line-height以匹配按钮的高度，以确保文本能垂直地放置在中央。background-position属性控制着背景图像的左上角的位置。

在div#menuli规则中，与width: 100%和 height: 100%联合在一起的display: block属性，能够使得按钮框内而不只是文本被点击。

最后，在独立按钮状态规则中，比如div#menulia:link，color和font-weight属性建立了文本翻滚效果，同样background-image和background-position也为背景图像实现了相同的功能。将悬浮状态设置为background-position: 0px -30px能够让背景图像增加到30象素，以致于顶端按钮外表被隐藏。同样，将激活状态设置为background-position: 0px -60px，可以将背景图像象素提高得更多。background-image需要在每一规则中不断地重复。

这一技术能够让你获得具有传统图形按钮的三维效果，并具有快速的CSS文本风格的混合按钮。同样，这一技术能够让你实现无延迟或者无图像预先载入的图形翻滚效果。