Question

javascript关于onclick的问题

onmouseover跟onmouseout实现改变背景图片后，想实现onclick点击后改变背景图片，可是onclick的效果跟onmouseover的效果一样，点击后鼠标离开背景又恢复以前的样子，哪位大侠帮忙解决下啊，最好代码附上，就是如果css中visited的效果，谢啦!!!

Answer 1

onmouseout事件中判断下图片路径。如果是onclick前的路径，onmouseout内容触发，否则不触发。
或者onclick事件中改变背景图片后移除掉onmouseout事件。但这样的话onmouseout就没了。

追问

我是新手，知道你的思路，但是不知道怎么写，能否给个简单例子或者写个简单的代码，谢啦！！

追答

function onover() {
var img1 = document.getElementById('img1');
img1.src = "Images/Prduct/Product_02.jpg";
img1.setAttribute("onmouseout", "onout()");
}
function onout() {
var img1 = document.getElementById('img1');
img1.src = 'Images/Prduct/Product_01.jpg';

}
function clickchange() {
var img1 = document.getElementById('img1');
img1.src = "Images/Prduct/Product_03.jpg";
img1.removeAttribute("onmouseout");
}

里面所有的图片你自己看着改掉看效果。写的很简单，应该很容易懂的。

Answer 2

我感觉可以更简单些，，，，
设两变量分别代表OVER的图片和OUT的图片路径。其它的和你开始作的一样（也不是全一样。在OVER 和OUT里设的背影不能是路径了。改成刚才设的两个变量）。。。只是在ONCLICK事件处理里面。。。直接改变量的值而不要去改别的。。

Answer 3

你是不是 这个页面还有onmouseout触发事件啊 ，要不不能的，就一句话 就搞定了啊 注意代码的整洁；function aa() {document.getElementById('img'). background-image:url="图片路径";} 注img是body或者div的id名字 要想实现你的效果 就得用这句代码 如果不好用 看浏览器提示 然后修改

Answer 4

可以通过onclick点击事件来写一个函数，获取到图片的id，通过属性设置图片的效果那样就算离开了也不会改变，document.getElementById("id").style //通过图片id来设置它的style属性

Answer 5

下边一段js代码是当点击<色彩变化>按钮时，背景图片会变化，
推荐你可以看下<程序员常用JavaScript特效.chm>这个文档，希望会对你有所帮助。

<script language="Javascript">
<!--
function backcolor(form){

temp = ""

for (var i = 0; i < 16; i++) {

temp = form.color[i].value

if (form.color[i].checked){ document.bgColor = temp }
}
}

function randombackground(){

document.bgColor = getColor()
}
function getColor(){
currentdate = new Date()
backgroundcolor = currentdate.getSeconds()
if (backgroundcolor > 44)
backgroundcolor = backgroundcolor - 45
else if (backgroundcolor > 29)
backgroundcolor = backgroundcolor - 30
else if (backgroundcolor > 15)
backgroundcolor = backgroundcolor - 16
if (backgroundcolor == 0 )
return "olive";
else if (backgroundcolor == 1 )
return "teal";
else if (backgroundcolor == 2 )
return "red";
else if (backgroundcolor == 3 )
return "blue";
else if (backgroundcolor == 4 )
return "maroon";
else if (backgroundcolor == 5 )
return "navy";
else if (backgroundcolor == 6 )
return "lime";
else if (backgroundcolor == 7 )
return "fuschia";
else if (backgroundcolor == 8 )
return "green";
else if (backgroundcolor == 9 )
return "purple";
else if (backgroundcolor == 10 )
return "gray";
else if (backgroundcolor == 11 )
return "yellow";
else if (backgroundcolor == 12 )
return "aqua";
else if (backgroundcolor == 13 )
return "black";
else if (backgroundcolor == 14 )
return "white";
else if (backgroundcolor == 15 )
return "silver";
}

// -->
</script>

<FORM>
<input type="button" value="色彩变化" onClick="randombackground()">
</form>