Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [html + js + css] Zmiana obrazka po wyborze z select, background-image
szaman0
post
Post #1





Grupa: Zarejestrowani
Postów: 12
Pomógł: 1
Dołączył: 12.02.2007

Ostrzeżenie: (0%)
-----

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 
  1. <script type="text/javascript">
  2. function wielkosc(warstwa,coZmienic,rozmiar) {
  3. document.getElementById(warstwa).style[coZmienic] = rozmiar;
  4. }
  5. function kolor(warstwa,coZmienic,kolor) {
  6. document.getElementById(warstwa).style[coZmienic] = kolor;
  7. }
  8. </script>
  9.  
  10. <style type="text/css">
  11. #zmienna {
  12.          position: relative;
  13.          font-size: 11px; 
  14.          margin-top: 20px;
  15.          color:#297bc7;
  16. }
  17.  
  18. #tlo
  19. {
  20. 	display:block;
  21. 	width:537px;
  22. 	height:546px;
  23. 	background-image:url(pliki_graficzne/glowne_tlo.jpg);
  24. 	background-repeat:no-repeat;
  25. 	padding: 20px 20px;
  26.  
  27.  
  28. }
  29. </style>
  30. </head>
  31. <body>
[HTML] pobierz, plaintext



kod kontrolki form:
[HTML] pobierz, plaintext 
  1. <p>zmień kolor tła</p>
  2.         <form id="formularz" action="#" class="form">
  3. 			<select style="width:110px;">
  4. 				<option value ="niebieskie.jpg" selected="selected">niebieskie</option>
  5. 				<option value ="pomarańczowe.jpg">pomarańczowe</option>
  6. 				<option value ="zielona.jpg">zielona</option>
  7. 			</select>
  8.  
  9. 		</form>
  10.         <p>zmień kolor czcionki</p>
  11.          <form id="formularz" action="#" class="form">
  12. 			<select onchange="kolor('zmienna','color',this.value)" style="width:110px;">
  13. 				<option value ="blue" selected="selected">blue</option>
  14. 				<option value ="orange">orange</option>
  15. 				<option value ="green">green</option>
  16.                 <option value ="red">red</option>
  17. 			</select>
  18. 		</form>
  19.         <p>zmień rozmiar czcionki</p>
  20.          <form id="formularz" action="#" class="form">
  21. 			<select onchange="wielkosc('zmienna','fontSize',this.value)" style="width:110px;">
  22. 				<option value ="11px" selected="selected">11px</option>
  23. 				<option value ="14px">14px</option>
  24. 			</select>
  25. 		</form>
[HTML] pobierz, plaintext


Z góry dziękuje za pomoc
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
Grzyw
post
Post #2





Grupa: Zarejestrowani
Postów: 561
Pomógł: 75
Dołączył: 19.08.2004
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

W ten sposób:

[HTML] pobierz, plaintext 
  1. function zmien()
  2. {
  3. document.getElementById("obiektID").style.backgroundImage.src="url/doobrazka.jpg";
  4. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
JaRoPHP
post
Post #3





Grupa: Zarejestrowani
Postów: 675
Pomógł: 15
Dołączył: 7.11.2004
Skąd: Katowice

Ostrzeżenie: (0%)
-----

Dostosuj do siebie:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function changeImage(img) {
  5. 	var oDiv = document.getElementById('layer');
  6. 	oDiv.style.backgroundImage = "url('"+img+"')";
  7. }
  8. </script>
  9. <style type="text/css">
  10. #layer {border: 1px solid #000; width: 250px; height: 250px; background: url(foto001.jpg) no-repeat;}
  11. </style>
  12. </head>
  13. <body>
  14. <form id="formularz" action="#" class="form">
  15. <select onchange="changeImage(this.value)" style="width:110px;">
  16. <option value ="foto002.jpg" selected="selected">foto002.jpg</option>
  17. <option value ="foto003.jpg">foto003.jpg</option>
  18. </select>
  19. </form>
  20. <div id="layer"></div>
  21. </body>
  22. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
szaman0
post
Post #4





Grupa: Zarejestrowani
Postów: 12
Pomógł: 1
Dołączył: 12.02.2007

Ostrzeżenie: (0%)
-----

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

Ten post edytował szaman0 12.01.2008, 20:17:54
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.12.2025 - 14:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn