Forum PHP.pl > [html + js + css] Zmiana obrazka po wyborze z select, background-image

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html + js + css] Zmiana obrazka po wyborze z select, background-image

szaman0

12.01.2008, 18:38:14

Szanowni Państwo

Chciałbym napisać skrypt w jc który po wyborze z listy rozwijanej zmieni obrazek, poprzesz edycję właściwości background-image. Udało mi się dokonać takiej modyfikacji dla wielkości i koloru czcionki, ale nie wiem jak tego dokonać dla obrazka. Prosił bym o pomoc w rozwiązaniu mojego problemu.

Oto jak to zrobiłem dla tekstu:

kod w js:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function wielkosc(warstwa,coZmienic,rozmiar) {
document.getElementById(warstwa).style[coZmienic] = rozmiar;
}
function kolor(warstwa,coZmienic,kolor) {
document.getElementById(warstwa).style[coZmienic] = kolor;
}
</script>
 
<style type="text/css">
#zmienna {
         position: relative;
         font-size: 11px; 
         margin-top: 20px;
         color:#297bc7;
}
 
#tlo
{
	display:block;
	width:537px;
	height:546px;
	background-image:url(pliki_graficzne/glowne_tlo.jpg);
	background-repeat:no-repeat;
	padding: 20px 20px;
 
 
}
</style>
</head>
<body>
[HTML] pobierz, plaintext

kod kontrolki form:

[HTML] pobierz, plaintext 
<p>zmień kolor tła</p>
        <form id="formularz" action="#" class="form">
			<select style="width:110px;">
				<option value ="niebieskie.jpg" selected="selected">niebieskie</option>
				<option value ="pomarańczowe.jpg">pomarańczowe</option>
				<option value ="zielona.jpg">zielona</option>
			</select>
 
		</form>
        <p>zmień kolor czcionki</p>
         <form id="formularz" action="#" class="form">
			<select onchange="kolor('zmienna','color',this.value)" style="width:110px;">
				<option value ="blue" selected="selected">blue</option>
				<option value ="orange">orange</option>
				<option value ="green">green</option>
                <option value ="red">red</option>
			</select>
		</form>
        <p>zmień rozmiar czcionki</p>
         <form id="formularz" action="#" class="form">
			<select onchange="wielkosc('zmienna','fontSize',this.value)" style="width:110px;">
				<option value ="11px" selected="selected">11px</option>
				<option value ="14px">14px</option>
			</select>
		</form>
[HTML] pobierz, plaintext

Z góry dziękuje za pomoc

Grzyw

12.01.2008, 18:53:49

W ten sposób:

[HTML] pobierz, plaintext 
function zmien()
{
document.getElementById("obiektID").style.backgroundImage.src="url/doobrazka.jpg";
}
[HTML] pobierz, plaintext

JaRoPHP

12.01.2008, 18:56:35

Dostosuj do siebie:

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext

szaman0

12.01.2008, 19:59:35

Dziękuje bardzo za pomoc, już wszystko mi działa:).

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.