Obserwujący 0
ghost14

zmiana tla w javascript image?

10 postów w tym temacie

Nie wiem czy chodzi Ci dokładnie o to, ale masz. 

 

Aby zmienić tło strony za pomocą java script musimy odwołać się do własności background.
Przykład:
<script type="text/javascript">
function zmianaTla(obrazek){
document.body.background=obrazek;
}
</script>
//zmiana tła strony po kliknięciu linku
<a href="javascript:zmianaTla('obrazek.gif')">Zmień tło</a>
1 osoba lubi to

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

O coś takiego chodziło tylko jak zmienić na drugie tło i trzecie dla przykładu?

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Liczę na piwko. ;) 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="Author" content="Wojtex">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Script-Type" content="text/css">
 
<script type="text/javascript">
   var tla=new Array('tlo1.png','tlo2.png'); 
   var index=0; 
 
   function zmien_tlo() { 
     document.getElementById('id_body').style.backgroundImage="url('"+tla[index]+"')"; 
    if(index==tla.length-1) 
        index=0; 
    else 
      index++; 
     setTimeout('zmien_tlo()',30000);//<--30 sekund 
}
</script>
</head>
 
<body onload="zmien_tlo()" id="id_body">
</body>
</html>

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Sorki ale tym razem zrobiłeś galerie przypadkiem anie tło na przyciski dwa...

 

Jeszcze raz mam stale tło w body co nie i chce dać dwa tła załaczane przyciskiem jak to zrobić?

 

- jak postawić piwko?

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Zaraz Ci pomogę bo idę się wykąpać. Klikasz na " Lubie to " 

 

Teraz musi Ci działać 

	<html>
	<head>
	<script type="text/javascript">
	function changeImage(img) {
	var oDiv = document.getElementById('layer');
	oDiv.style.backgroundImage = "url('"+img+"')";
	}
	</script>
	<style type="text/css">
	#layer {border: 1px solid #000; width: 250px; height: 250px; background: url(foto001.jpg) no-repeat;}
	</style>
	</head>
	<body>
	<form id="formularz" action="#" class="form">
	<select onchange="changeImage(this.value)" style="width:110px;">
	<option value ="foto002.jpg" selected="selected">foto002.jpg</option>
	<option value ="foto003.jpg">foto003.jpg</option>
	</select>
	</form>
	<div id="layer"></div>
	</body>
	</html>
	
Edytowane przez PatryczeK

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

No tak, edytowałem post z poprawnym kodem. :P 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Kod prawie dobry ale daje odswiezanie i mam dopiero 1 tlo a mialo byc stale dla body lub dla diva a reszta dobra sprawdz sam?

 

<html>
 
 
<head>
 
 
<script type="text/javascript">
function changeImage(img) {
var oDiv = document.getElementById('layer');
oDiv.style.backgroundImage = "url('"+img+"')";
}
</script>
<style type="text/css">
#layer {border: 1px solid #000; width: 1000px; height: 1200px; background: url(tlo1.jpg) no-repeat;}
</style>
</head>
<body>
<form id="formularz" action="#" class="form">
<select onchange="changeImage(this.value)" style="width:110px;">
<option value="tlo2.jpg" selected="selected">tlo2.jpg</option>
<option value="tlo3.jpg" selected="selected">tlo3.jpg</option>
</select>
</form>
<div id="layer"></div>
</body>
</html>
 
 
 
 
 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Wykombinowałem i tak powinno wyglądać:

<html>
<head>
<script type="text/javascript">
function changeImage(img) {
var oDiv = document.getElementById('layer');
oDiv.style.backgroundImage = "url('"+img+"')";
}
</script>
<style type="text/css">
*{margin:0px; padding:0px;}
#layer {border: 1px solid #000; width: 1000px; height: 1200px; background: url(tlo1.jpg) no-repeat;}
</style>
</head>
<body id="layer">
<form id="formularz" action="#" class="form">
<select onchange="changeImage(this.value)" style="width:110px;">
<option value="tlo2.jpg" selected="selected">tlo2.jpg</option>
<option value="tlo3.jpg" selected="selected">tlo3.jpg</option>
</select>
</form>
<div></div>
</body>
</html>
 
 
 
 
 
Edytowane przez ghost14

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach
Gość
Ten temat jest zamknięty i nie można dodawać odpowiedzi.
Obserwujący 0