事件onclick改變背景圖片

我是初學者，並寫了一些HTML代碼，但我需要的是，當我點擊div來改變背景圖片...我怎麼能做到這一點？事件onclick改變背景圖片

下面是代碼：

<!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我打算做。在懸停時更改圖片，然後點擊...感謝！

來源

2012-02-13 Miki Cloud

或一些其他的方式該怎麼做...也許jQuery或JavaScript？ – 2012-02-13 15:24:48

您應該使用不是ID的類。並點擊後更改類。 – gdoron 2012-02-13 15:27:07

好的，但如何改變點擊類？ – 2012-02-13 15:28:07

使用jQuery你可以做這樣的事情：

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

如果你wan't切換，你可以這樣做：

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

}）;

來源

2012-02-13 15:27:40

是的，但當我點擊兩次，然後將保持相同的圖像...我需要點擊一次，當我點擊第二次返回原始圖像時，圖像...（一個圖像是balck $白色和其他是顏色） – 2012-02-13 15:30:29

更新我的答案 – 2012-02-13 15:37:12

<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的照片這將始終提供不同的照片。

來源

2012-02-13 15:28:08

或者您可以使用$（'＃kat1'）。addclass（'altimage'）;如果你想在CSS文件中聲明備用圖像作爲類。 – Hersha 2012-02-13 15:29:32

是的，但當我點擊兩次，然後將保持相同的圖像...我需要點擊一次圖像，當我點擊第二次回原始圖像...（一個圖像是balck $白色和其他是在顏色） – 2012-02-13 15:30:16

@Feysal你到底在說什麼？這是完全nonsene你在說什麼。 .on（）與tabindexes無關 – 2012-02-13 15:32:58

-1

您可以使用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>

來源

2012-02-13 15:29:34 Feysal

-1，因爲你必須使用.on（）或.click（）這個。 mousedown和mouseup並不是通用的方式來實現操作所尋找的。 – 2012-02-13 15:35:12

還有很多需要提高的，但你可以開始與階級取代IDS

<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>

來源

2012-02-13 15:37:15 gdoron

，我需要把jQuery代碼...對不起這個，但我beginer這個HTML的CSS-JS – 2012-02-13 15:39:23

@MikiCloud。裏面'

相關問題

事件onclick改變背景圖片

回答

相關問題