Forum PHP.pl > [javascript] Zmiana tła komórki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [javascript] Zmiana tła komórki

Rzast

6.12.2006, 10:25:43

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 
<input type="radio" value="00" name="tlo_c" />
<input type="radio" value="33" name="tlo_c" />
<input type="radio" value="66" name="tlo_c" />
<input type="radio" value="99" name="tlo_c" />
<input type="radio" value="cc" name="tlo_c" />
<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?

empathon

6.12.2006, 10:59:11

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

Rzast

6.12.2006, 11:26:04

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ć?

siemakuba

6.12.2006, 12:36:31

Coś takiego?

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript">
 
var colorVals = new Array('00','00','00');
 
function SetColor(obj)
{
    if (obj.name == 'tlo_r')
    {   colorVals[0] = obj.value;
    }
    else if (obj.name == 'tlo_g')
    {   colorVals[1] = obj.value;
    }
    else if (obj.name == 'tlo_b')
    {   colorVals[2] = obj.value;
    }
 
    var clr = colorVals.join('');
    var div = document.getElementById('set-color-here');
        div.style.backgroundColor = '#'+clr;
}
 
</script>
</head>
<body>
<form>
<fieldset><legend>Czerwony (R)</legend>
    <input type="radio" value="00" name="tlo_r" onchange="SetColor(this)"> 00
    <input type="radio" value="33" name="tlo_r" onchange="SetColor(this)"> 33
    <input type="radio" value="66" name="tlo_r" onchange="SetColor(this)"> 66 
    <input type="radio" value="99" name="tlo_r" onchange="SetColor(this)"> 99
    <input type="radio" value="cc" name="tlo_r" onchange="SetColor(this)"> CC
    <input type="radio" value="ff" name="tlo_r" onchange="SetColor(this)"> FF
</fieldset>
<fieldset><legend>Zielony (G)</legend>
    <input type="radio" value="00" name="tlo_g" onchange="SetColor(this)"> 00
    <input type="radio" value="33" name="tlo_g" onchange="SetColor(this)"> 33
    <input type="radio" value="66" name="tlo_g" onchange="SetColor(this)"> 66
    <input type="radio" value="99" name="tlo_g" onchange="SetColor(this)"> 99
    <input type="radio" value="cc" name="tlo_g" onchange="SetColor(this)"> CC
    <input type="radio" value="ff" name="tlo_g" onchange="SetColor(this)"> FF
</fieldset>
<fieldset><legend>Czarny (B)</legend>
    <input type="radio" value="00" name="tlo_b" onchange="SetColor(this)"> 00
    <input type="radio" value="33" name="tlo_b" onchange="SetColor(this)"> 33
    <input type="radio" value="66" name="tlo_b" onchange="SetColor(this)"> 66
    <input type="radio" value="99" name="tlo_b" onchange="SetColor(this)"> 99
    <input type="radio" value="cc" name="tlo_b" onchange="SetColor(this)"> CC
    <input type="radio" value="ff" name="tlo_b" onchange="SetColor(this)"> FF
</fieldset>
</form>
<br><br>
<div id="set-color-here" style="width:200px; height:200px;"></div>
</body>
</html>
[HTML] pobierz, plaintext

pozdr.

Rzast

6.12.2006, 12:52:06

No tak... czyli sekcja HEAD się kłania...

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

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.