怎么用CSS或者JS实现鼠标点击变换背景图片？

html-css017

怎么用CSS或者JS实现鼠标点击变换背景图片？,第1张

使用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}

background: #ff0000 url(你图片的地址) no-repeat fixed 0 0

#ff0000 表示背景图片由于某种原因无法显示所显示的颜色

url() 在括号中输入你想要作为背景的图片

no-repeat 表示该背景图片是否重复显示(repeat-x repeat-y repeat 等)

fixed 0 0背景图片想要显示区域的定位

1.如果仅仅是光标放到div按钮上按钮背景图片改变，直接用css实现：

.div1{background:url(../images/but_01.gif) }

.div1:hover{background:url(../images/but_02.gif)}

2.如果是点击div按钮，按钮背景图片改变，可以用JQuery实现：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>

<style type="text/css">

.div1

{

width: 300px

height: 300px

border: 1px solid black

background-image: url(Images/1.jpg)

}

</style>

<script type="text/javascript">

$(document).ready(function () {

$(".div1").bind("click", function () {

$(this).css("background-image", "url(Images/3.jpg)").mouseout(function () {

$(this).css("background-image", "url(Images/1.jpg)")

})

})//bind

}) //ready

</script>

</head>

<body>

<div class="div1">

</div>

</body>

</html>