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

html-css039

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

<img src="1.jpg" width="100" height="100" alt="" onclick="pf(this)"/>

<script type="text/javascript">

var arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]

function pf(t) {

t.src = arr[Math.floor(Math.random()*arr.length)]

}

script>

<div class="gyyy">

<img src="关于医院.jpg">

<span>关于医院</span>

</div>

$(function(){

var imgs=document.getElementsByName("img")

$(".gyyy").click(function(){

imgs.src="新图片的路径";

$(".gyyy>span").css("color","blue")

})

})

做好准备工作,把两张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>