事件onclick更改背景图像

时间：2012-02-13 15:24:10

标签： jquery html css click mouseevent

我是初学者并编写了一些HTML代码，但我需要的是当我点击div更改背景图片时...我该怎么做？

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#kat1 {
    background-image:url(ikoniceKategorije/07.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat1:hover {
    background-image:url(ikoniceKategorije/07h.jpg);
    }

#kat2 {
    background-image:url(ikoniceKategorije/06.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat2:hover {
    background-image:url(ikoniceKategorije/06h.jpg);
    }

#kat3 {
    background-image:url(ikoniceKategorije/05.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat3:hover {
    background-image:url(ikoniceKategorije/05h.jpg);
    }

#kat4 {
    background-image:url(ikoniceKategorije/04.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat4:hover {
    background-image:url(ikoniceKategorije/04h.jpg);
    }
#kat5 {
    background-image:url(ikoniceKategorije/03.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat5:hover {
    background-image:url(ikoniceKategorije/03h.jpg);
    }

#kat6 {
    background-image:url(ikoniceKategorije/02.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat6:hover {
    background-image:url(ikoniceKategorije/02h.jpg);
    }

#kat7 {
    background-image:url(ikoniceKategorije/01.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat7:hover {
    background-image:url(ikoniceKategorije/01h.jpg);
    }
#div {
    width:220px;
    height:30px;
    overflow:hidden;
    }

</style>
</head>

<body>
    <div id="div">
        <div id="kat1"></div>
        <div id="kat2"></div>
        <div id="kat3"></div>
        <div id="kat4"></div>
        <div id="kat5"></div>
        <div id="kat6"></div>
        <div id="kat7"></div>
    </div>
</body>
</html>

或者你可以在www.pluspon.com/kategorije.html上看到我打算做什么。在悬停时点击更改图像，也可以点击...感谢!!!

4 个答案:

答案 0 :(得分：1)

使用jQuery你可以这样做：

$(document).ready(function () {
    $("#kat1").click(function () {
        $(this).css("background-image", "xxx.png");
    });
});

如果你想切换，你可以这样做：

$("#kat1").click(function () {
    if ($(this).css("background-image") == first_Image) {
        $(this).css("background-image", second_Image);
    }
    else {
        $(this).css("background-image", first_Image);
    } 
});

}）;

答案 1 :(得分：1)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    var img=["picture1.jpg","picture2.jpg","picture3.jpg","picture4.jpg"];
    var index =0;
  $('#kat1').on("click",function(){
       $('#kat1').css('background-image',img[index]);
        if(index==3){
            index=0;
        }else{
            index++;
        }           
   });
</script>

会改变你的kat1 div的背景。现在你将有4个不同的图像。您还可以拍摄lorempixum.com的照片。这将始终提供不同的照片。

答案 2 :(得分：0)

还有很多需要改进的地方，但您可以从使用类

替换ID开始 
<style type="text/css">
.kat1 {
    background-image:url(ikoniceKategorije/07.jpg);
    width:30px;
    height:30px;
    float:left;
    }
.kat1:hover {
    background-image:url(ikoniceKategorije/07h.jpg);
    }

.kat2 {
    background-image:url(ikoniceKategorije/06.jpg);
    width:30px;
    height:30px;
    float:left;
    }
.kat2:hover {
    background-image:url(ikoniceKategorije/06h.jpg);
    }

.kat3 {
    background-image:url(ikoniceKategorije/05.jpg);
    width:30px;
    height:30px;
    float:left;
    }
.kat3:hover {
    background-image:url(ikoniceKategorije/05h.jpg);
    }

.kat4 {
    background-image:url(ikoniceKategorije/04.jpg);
    width:30px;
    height:30px;
    float:left;
    }
.kat4:hover {
    background-image:url(ikoniceKategorije/04h.jpg);
    }
.kat5 {
    background-image:url(ikoniceKategorije/03.jpg);
    width:30px;
    height:30px;
    float:left;
    }
.kat5:hover {
    background-image:url(ikoniceKategorije/03h.jpg);
    }

.kat6 {
    background-image:url(ikoniceKategorije/02.jpg);
    width:30px;
    height:30px;
    float:left;
    }
.kat6:hover {
    background-image:url(ikoniceKategorije/02h.jpg);
    }

.kat7 {
    background-image:url(ikoniceKategorije/01.jpg);
    width:30px;
    height:30px;
    float:left;
    }
.kat7:hover {
    background-image:url(ikoniceKategorije/01h.jpg);
    }
.foo{
    background-image:url(somePcitureThatYouWant.jpg); <===
}   
#div {
    width:220px;
    height:30px;
    overflow:hidden;
    }

</style>
</head>

<body>
    <div id="div">
        <div class="kat1 changing"></div> 
        <div class="kat2 changing"></div>
        <div class="kat3 changing"></div>
        <div class="kat4 changing"></div>
        <div class="kat5 changing"></div>
        <div class="kat6 changing"></div>
        <div class="kat7 changing"></div>
    </div>
</body>
</html>

Jquery代码： 

<script>
$(function(){
    $('.changing').click(function(){
        $(this).addClass('foo').removeClass();
    })
});
</script>

答案 3 :(得分：-1)

您可以使用javascript函数为div响应onmousedown和onmouseup事件，来回更改背景样式或替换div的class属性。或者，您可以使用onclick，在这种情况下，需要再次单击才能更改。

以下代码包含两种解决方案：kat1包含onmousedown和onmouseup，kat2包含onclick。

顺便说一下，由于width，height和float是所有类别的共同属性，因此它们在样式中只需要一个定义。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#div {
    width:220px;
    height:30px;
    overflow:hidden;
    }

#div div {
    width:30px;
    height:30px;
    float:left;
    }

.kat1, .kat1_active {
    background-image:url(/ikoniceKategorije/07.jpg);
    }
.kat1:hover {
    background-image:url(/ikoniceKategorije/07h.jpg);
    }

.kat2 {
    background-image:url(/ikoniceKategorije/06.jpg);
    }
.kat2_active {
    background-image:url(/ikoniceKategorije/06h.jpg);
    }

.kat3 {
    background-image:url(/ikoniceKategorije/05.jpg);
    }
.kat3:hover {
    background-image:url(/ikoniceKategorije/05h.jpg);
    }

.kat4 {
    background-image:url(/ikoniceKategorije/04.jpg);
    }
.kat4:hover {
    background-image:url(/ikoniceKategorije/04h.jpg);
    }

.kat5 {
    background-image:url(/ikoniceKategorije/03.jpg);
    }
.kat5:hover {
    background-image:url(/ikoniceKategorije/03h.jpg);
    }

.kat6 {
    background-image:url(/ikoniceKategorije/02.jpg);
    }
.kat6:hover {
    background-image:url(/ikoniceKategorije/02h.jpg);
    }

.kat7 {
    background-image:url(/ikoniceKategorije/01.jpg);
    }
.kat7:hover {
    background-image:url(/ikoniceKategorije/01h.jpg);
    }
</style>
<script type="text/javascript">
function toggle(element) {
    var index = element.className.indexOf('_active');
    if (index == -1) {
        element.className += '_active';
    } else {
        element.className = element.className.substring(0, index);
    }
}
</script>
</head>

<body>
    <div id="div">
        <div class="kat1" onmousedown="this.className='kat1_active'" onmouseup="this.className='kat1'"></div>
        <div class="kat2" onclick="toggle(this)"></div>
        <div class="kat3"></div>
        <div class="kat4"></div>
        <div class="kat5"></div>
        <div class="kat6"></div>
        <div class="kat7"></div>
    </div>
</body>
</html>
相关问题
最新问题