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

html-css010

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

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

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

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

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

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

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

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