Background image değiştirmek ?

09-11-2013, 18:05:44

Kimlik doğrulama veya yönetimden onay bekliyor.

Arkadaşlar tek istediğim öğrenmek, ben diyorum ki .bir classına tıklanıldığında background değişsin şöyle yapıyorum;

.bir:hover body {
background:url("yeniresim.jpg") !important;
}

ama çalışmıyor, jquery de oluyor ama ben css de yapmak istiyorum, nasıl becerebilirim ?
Kodlarım

<!DOCTYPE HTML>
<html lang="tr">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
		});
	</script>
	<style type="text/css">
	body {
		background:url("img/1.jpg");
		-webkit-background-size:cover;
	}
	.slide {position:absolute;bottom:50px;width:100%;min-height:200px;background:rgba(255,255,255,0.6);line-height:200px;}
	.slide a img {border:none;width:200px;height:150px;margin:0 5px;-webkit-transition:border 0.5s;border:5px solid rgba(255,255,255,0);}
	.slide a img:hover {border:5px solid #fff;}

	.iki:hover body {
		background:url("img/2.jpg") !important;
	}
	</style>
</head>
<body>
	
	<div class="slide">
		<a href="#" class="bir"><img src="img/1.jpg" alt="1" /></a>
		<a href="#" class="iki"><img src="img/2.jpg" alt="2" /></a>
		<a href="#" class="uc"><img src="img/3.jpg" alt="3" /></a>
		<a href="#" class="dort"><img src="img/4.jpg" alt="4" /></a>
		<a href="#" class="bes"><img src="img/5.jpg" alt="5" /></a>
	</div>
</body>	
</html>

09-11-2013, 21:59:43

#2

alikarakoc93

:active olarak dene bakalım birde

10-11-2013, 13:28:45

#3

PrestijTR

alikarakoc93 adlı üyeden alıntı: mesajı görüntüle

:active olarak dene bakalım birde

Hocam hover ve ya active olayın da bi problem yok yani şimdi ben bir:active body yapsam da .bir:hover body yapsamda bu kod çalışmıyor sorun tam olarak burada işte

10-11-2013, 13:40:21

#4

M y

İstediğiniz şey bir butona tıkladığında sayfanın arka planını değiştirmekse css ile yapılabileceğini zannetmiyorum.
Sorun tam olarak css hakkında teorik bilgi edinmeden uygulama yapmanızdan kaynaklanıyor.

10-11-2013, 14:24:16

#5

alikarakoc93

.bir:hover body bu nasıl bir css kodu?

orda ki body ne ?

Eğer bir butona veya div'e tıklandığında arkaplan rengi değişecekse yapacağın şey.

$(document).ready(function(){

    $("body").click(function () {
        $('body').css('background-color', 'blue');
    });
			
});

10-11-2013, 16:07:37

#6

PrestijTR

M y adlı üyeden alıntı: mesajı görüntüle

İstediğiniz şey bir butona tıkladığında sayfanın arka planını değiştirmekse css ile yapılabileceğini zannetmiyorum.
Sorun tam olarak css hakkında teorik bilgi edinmeden uygulama yapmanızdan kaynaklanıyor.

Hocam anladım yanlış yazmışım zaten tıklayınca değil üzerine gelince istiyorum bu yüzdende jquery kullanarak yük vermek istemiyorum siteye

alikarakoc93 adlı üyeden alıntı: mesajı görüntüle

.bir:hover body bu nasıl bir css kodu?

orda ki body ne ?

Eğer bir butona veya div'e tıklandığında arkaplan rengi değişecekse yapacağın şey.

$(document).ready(function(){

    $("body").click(function () {
        $('body').css('background-color', 'blue');
    });
			
});

Hocam anlatamadım galiba

Benim demek istediğim butona tıklayınca body'nin arkaplan resmi değişsin, bu kod böyle yazılmıyor muydu ? CSS ile böyle hatırlıyorum örneğin a divinin üzerine gelince b divi mavi olsun

.a:hover .b {background:blue}
gibi

10-11-2013, 16:47:06

#7

alikarakoc93

Bunu css de sanırım yapamazsın.
Ama istediğin şeyi şu şekilde yapabilirsin.

        $(document).ready(function () {
            $(".a").hover(function () {
                $(".b").attr("style", "background-color:blue");
            }, function () {
                $(".b").removeAttr("style");
            });
        });

Örnek için tıklayınız.

11-11-2013, 02:22:55

#8

frdtrkc

Senin istediğin css ile yapılamaz, css ile parent elemente ulaşılamaz onun yerine jquery yardımıyla basit olarak aşağıdaki gibi yapılabilir.

SLIDE sınıfı altındaki IMG elementine tıklandığında, tıklanan IMG'nin SRC'sindeki URL'yi BODY'e arka plan olarak atayacaktır.

$(function () {
    $(".slide img").click(function () {
        $("body").css("background-image", "url(" + $(this).attr("src") + ")");
    });
});