Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [javascript] Zmiana tła komórki, za pomocą składowych wybieranych przez radiobuttony
Rzast
post
Post #1





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 24.11.2005
Skąd: Podczerwone

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

Witam
i mam prośbę o skrypt w javascripcie, albo przynajmniej naprowadzenie na rozwiązanie...
Sprawa wygląda tak:
dla każdego koloru (czerwony, zielony, niebieski) mam po 6 radiobuttonów, każdy o wartości rosnącej od 00 do FF z krokiem 33 i nazwie korenspondującej z kolorem (odpowiednio: tlo_c, tlo_g, tlo_b), czyli wygląda to tak (dla przykładu czerwony):
[HTML] pobierz, plaintext 
  1. <input type="radio" value="00" name="tlo_c" />
  2. <input type="radio" value="33" name="tlo_c" />
  3. <input type="radio" value="66" name="tlo_c" />
  4. <input type="radio" value="99" name="tlo_c" />
  5. <input type="radio" value="cc" name="tlo_c" />
  6. <input type="radio" value="ff" name="tlo_c" />
[HTML] pobierz, plaintext


i teraz: na tej samej stronie jest komórka w tabeli o id="tlo", która ma mieć tło wybrane z powyższych składowych. Jak za pomocą JavaScriptu zrobić, by tło w tabeli zmieniało się dynamicznie, czyli po każdym wybraniu jakieś wartości w powyższych radiobuttonach.
Innymi słowy - jakie zdarzenie dać do onClick przy powyższych inputach?


--------------------
Podhale naprawa komputerów, strony WWW
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
empathon
post
Post #2





Grupa: Zarejestrowani
Postów: 246
Pomógł: 31
Dołączył: 13.11.2006
Skąd: się znamy?

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

[HTML] pobierz, plaintext 
  1. onClick = "object.style.backgroundColor = '#999999'"
[HTML] pobierz, plaintext


--------------------
Goldenline: Łukasz Rodziewicz
Go to the top of the page
+Quote Post
Rzast
post
Post #3





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 24.11.2005
Skąd: Podczerwone

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

empathon:
Dzięki, ale nie o to chodziło...
chodzi mi o to, że po wybraniu np tlo_c o wartości "00", tlo_g o wartości "FF" i tlo_b o wartości "33" mamy tło komórki takie: #00FF33
a jak zmienię tlo_c z "00" na "CC" to wtedy tło komórki mam takie: #CCFF33.
Ponawiam pytanie:Jak to zrobić?


--------------------
Podhale naprawa komputerów, strony WWW
Go to the top of the page
+Quote Post
siemakuba
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 1 112
Pomógł: 20
Dołączył: 10.04.2005

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

Coś takiego?

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. var colorVals = new Array('00','00','00');
  6.  
  7. function SetColor(obj)
  8. {
  9.     if (obj.name == 'tlo_r')
  10.     {   colorVals[0] = obj.value;
  11.     }
  12.     else if (obj.name == 'tlo_g')
  13.     {   colorVals[1] = obj.value;
  14.     }
  15.     else if (obj.name == 'tlo_b')
  16.     {   colorVals[2] = obj.value;
  17.     }
  18.  
  19.     var clr = colorVals.join('');
  20.     var div = document.getElementById('set-color-here');
  21.         div.style.backgroundColor = '#'+clr;
  22. }
  23.  
  24. </script>
  25. </head>
  26. <body>
  27. <form>
  28. <fieldset><legend>Czerwony (R)</legend>
  29.     <input type="radio" value="00" name="tlo_r" onchange="SetColor(this)"> 00
  30.     <input type="radio" value="33" name="tlo_r" onchange="SetColor(this)"> 33
  31.     <input type="radio" value="66" name="tlo_r" onchange="SetColor(this)"> 66 
  32.     <input type="radio" value="99" name="tlo_r" onchange="SetColor(this)"> 99
  33.     <input type="radio" value="cc" name="tlo_r" onchange="SetColor(this)"> CC
  34.     <input type="radio" value="ff" name="tlo_r" onchange="SetColor(this)"> FF
  35. </fieldset>
  36. <fieldset><legend>Zielony (G)</legend>
  37.     <input type="radio" value="00" name="tlo_g" onchange="SetColor(this)"> 00
  38.     <input type="radio" value="33" name="tlo_g" onchange="SetColor(this)"> 33
  39.     <input type="radio" value="66" name="tlo_g" onchange="SetColor(this)"> 66
  40.     <input type="radio" value="99" name="tlo_g" onchange="SetColor(this)"> 99
  41.     <input type="radio" value="cc" name="tlo_g" onchange="SetColor(this)"> CC
  42.     <input type="radio" value="ff" name="tlo_g" onchange="SetColor(this)"> FF
  43. </fieldset>
  44. <fieldset><legend>Czarny (B)</legend>
  45.     <input type="radio" value="00" name="tlo_b" onchange="SetColor(this)"> 00
  46.     <input type="radio" value="33" name="tlo_b" onchange="SetColor(this)"> 33
  47.     <input type="radio" value="66" name="tlo_b" onchange="SetColor(this)"> 66
  48.     <input type="radio" value="99" name="tlo_b" onchange="SetColor(this)"> 99
  49.     <input type="radio" value="cc" name="tlo_b" onchange="SetColor(this)"> CC
  50.     <input type="radio" value="ff" name="tlo_b" onchange="SetColor(this)"> FF
  51. </fieldset>
  52. </form>
  53. <br><br>
  54. <div id="set-color-here" style="width:200px; height:200px;"></div>
  55. </body>
  56. </html>
[HTML] pobierz, plaintext


pozdr.
Go to the top of the page
+Quote Post
Rzast
post
Post #5





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 24.11.2005
Skąd: Podczerwone

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

No tak... czyli sekcja HEAD się kłania... smile.gif
siemakuba:
dzięki, właśnie o coś takiego mi chodziło

edit:
Jako zdarzenie w radio lepsze będzie onClick, zamiast onChange, będzie reagować natychmiast

Jeszcze raz dzięki

Ten post edytował Rzast 6.12.2006, 12:57:36


--------------------
Podhale naprawa komputerów, strony WWW
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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: 19.08.2025 - 16:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn