CSS图片切换效果

html-css041

CSS图片切换效果,第1张

要CSS的呀？一般都用JS的。

如果是CSS的，只能做到背景切换，做不到图片本身切换。

为了要支持IE6，所以一般都用a的伪类来做这种效果

a{background-image:url(普通状态时的背景图片)}

a:hover{background-image:url(鼠标放上去的背景图片)}

如果是做图片本身切换的话，只能用JS

<img src="原图片" onmouseover="this.src='新图片'" onmouseout="this.src='原图片'" />

做好准备工作，把两张100px

X

100px的图片合成

100

X

200

的。通过CSS图片定位来达到切换效果。存放在根目录

img\tupian.gif

<style>

#div_1{width:100pxheight:100pxmargin:0padding:0}

定义一个DIV方框

#div_1

ul,li{list-style:nonemargin:0pxpadding:0px}

定义div_1中UL,LI

#div_1

li{float:leftmargin:0}

#div_1

a{

background:url(img/tupian.gif)

no-repeatwidth:100pxheight:100pxdisplay:block

}

定div_1中链接背景样式等

#a1

a:hover,#a1

a:active{

background-position:

0px

-100pxheight:100px

}

定义一个鼠标悬停状态

</style>

在BODY中

<div

id="div_1"><ul>

<li><a

href="#">首页</a></li>

使用jquery的toggle方法进行图片切换\x0d\x0a$(function(){\x0d\x0a$("#h1").toggle(function(){\x0d\x0a$("#h1").css("background-image","路径('./20110528073501b54e6.jpg')")\x0d\x0a},function(){\x0d\x0a$("#h1").css("background-image","路径('./2011060708410874041.jpg')")\x0d\x0a})\x0d\x0a}) \x0d\x0a\x0d\x0a\x0d\x0a \x0d\x0aCSS\x0d\x0a.hh1{\x0d\x0abackground: url("./2011060708410874041.jpg")\x0d\x0awidth: 120px\x0d\x0aheight: 90px\x0d\x0a}