Событие onclick, чтобы изменить фоновое изображение - PullRequest
Новая
       8

Событие onclick, чтобы изменить фоновое изображение

0 голосов
/ 13 февраля 2012

Я новичок и пишу некоторый 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 ]

1 голос
/ 13 февраля 2012 
<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>

изменит фон вашего div kat1.Теперь у вас будет 4 разных изображения.То, что вы могли бы также сделать, это сфотографировать lorempixum.com Это всегда будет доставлять разные фотографии.

1 голос
/ 13 февраля 2012

Используя 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);
    } 
});

});

0 голосов
/ 13 февраля 2012

Есть много улучшений, но вы можете начать с замены идентификаторов на класс 

<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>
0 голосов
/ 13 февраля 2012

Вы можете использовать функции javascript для div, чтобы реагировать на события onmousedown и onmouseup, изменять стиль фона или, альтернативно, атрибут класса div в обоих направлениях. В качестве альтернативы вы можете использовать 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>
...