CSS技术结合图像实现动态效果的菜单导航

　　CSS技术结合图像实现动态效果的菜单导航

　　本文介绍一些我们经常使用但很少关注的东西，在下面的叙述中我们假设你的CSS使用的是@import技术，因为这里CSS可能会让你对Opera 4失去信心。如果你把图像作为你的页面布局的一部分，在CSS的控制之下嵌入图像很可能是你不希望得到的结果如果你使用的是一个不支持CSS2标准的浏览器例如Opera 4。下面介绍一个例子，使用一些GIF图像去修饰圆角。

　　事实上我不想在网页的HTML代码中嵌入图像，因为它们代表的只是视觉上的东西，而不是内容上的体现，因此我将它们和其它一些有代表性的部分放在CSS之下控制。 这个方法将使你更加方便地控制页面，让其变得更加漂亮。为了做出环绕的效果，我利用了CSS背景图像:使用这些背景图像的目的是要更好地适应CSS的布局，我们将这些图像嵌入层的背景中。

　　在这里你可以看见我是怎样定义图片的大小的(19px*37px)，而且在每个图片的末端有相应的背景图像。然后将这两幅图片放置在预先确定好了的线性对象里边。当然很多这些原理都是可以重复使用的，因此你最后的CSS代码不需要很大。这个方法的唯一缺点就是它不能用来调整动态的图片的大小，如果你的层比图像小的话，它将被忽略，如果你的层比图像大的话，它将反复被填进空白区。但是你很有可能就是不希望图像在运作中的任何位置都能被觉察到。

　　CSS动态图像技术

　　给CSS文本菜单赋予动态的技术，例如网页的左侧菜单，这种菜单现在被越来越多的人所喜爱。但是我不认为我曾经看见过这种技术:一个纯粹使用CSS来实现这一效果的技术。它让菜单拥有图像转换功能，这里的问题就是我们用纯CSS去实现这一效果。下面使用两个步骤来世实现菜单的图像变换技术。第一步仅仅变动背景颜色;第二步，就是精确的旋转多维图像。(警告:这门技术的缺点就是其中一些技术不能与Opera 6一起使用，虽然他们在Opera 7中是一种很好的技术。)

　　变换背景图像1

　　如果这是一幅透明的背景图像，那我们就可以非常容易地使用选择器改变其背景色。 在本例中图像被嵌入在HTML资源中，这就意味着在不支持CSS2标准的浏览器中它也会显示(除了文本浏览器!). 其代码将比下面的例子复杂，但它能在我尝试的所有浏览器中运作。要注意的是在实现效果的过程中一次仅能下载一张图像。

　　变换背景图像2

　　这个版本相对版本1是非常简单的。其图像是CSS背景图像，因此不支持CSS2标准的浏览器中不会显示出来:但是我们提供了一个可选择的文本链接，这是一个被淘汰了的例子。

　　旋转按钮1

　　现在针对不需要JS脚本语言进行支撑的旋转图像讲述一些新的方法，第一种方法是使用背景图,利用a:hover特性，当指针指向图像时改变背景图,因此如果关闭了CSS的话图像就不会显示,同时我们还可以获得可选择的文本链接.该方法支持IE6,Netscape 7, Mozilla and Opera 7,但不支持Opera 6.第三类按钮状态可以通过相似方法:活跃选择器来传给图像。读者可以把这种方法当作是练习做一做。

　　旋转按钮1a

　　这是个不同于按钮1的按扭.我们再次使用一幅CSS背景图,但是不是使用一个旋转选择来加载一幅新的图像给按钮的其它状态,我们使用CSS来改变现有图像的位置.这样使用如果图像太大,则背景图像被修剪.因此我们的按钮是单独的图像包含两种按钮状态.通常显示上半部图像,但是当按钮旋转图像则替换显示下半部.因此这是完整的图像.使用这种方法这里有两种优势.首先,如果访问按钮时为了减少下载数据数量-仅下载一幅图像带替两幅-因此这是更快的.其次,在第一次访问时没有延迟去等待下载第二幅图像:它已经在这了.不需预载复杂的图像。不利方面就是如果按钮不被访问,则一些位带宽被浪费了,这些是在使用时的观念,对按钮1,HTML和CSS也是如此.主要的差异在:旋转选择。

　　结转按钮2

　　如下,另一途径实现CSS旋转图像为使用图像的Z索引特性,Z索引控制显示哪个元素在最顶层.不幸的是,它不支持IE6或Opera 6.Opera 7, Mozilla 和 Netscape 7能工作,但是在这种情况下Mozilla是如此的慢,在CSS2浏览器旋转不工作,仅顶层图像显示正常.在非CSS2浏览器顶层和旋转图像并排显示,看起来是古怪的. Internet Explorer的工作区包含一个小处理程序,如果图像背景色改变了,则Z索引也改变,Internet Explorer获得变化进行相关工作.菲利普通过改变三原色值改变颜色(例如将#ffffff改为#fffffe)如此很小的改变效果都是显著的。

　　新版网页陶吧上线