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

JavaScript06

怎么用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}

您好，这样的：

1、<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>Jquery deal images</title>

<script src="./js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

<!--

//这里是JS代码 ，下面豆芽会写上

//-->

</script>

</head>

<body>

<img src="./images/img02.png" />

</body>

</html>

2、

$(document).ready(function(){

var newImage = new Image()//预载入图片

var oldImage = $('img').attr('src')

newImage.src = './images/img03.jpg'

$('img').hover(function(){ //鼠标滑过图片切换

$('img').attr('src',newImage.src)

},

function(){

$('img').attr('src',oldImage)

})

})

这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。