Změna barvy pozadí v buňce tabulky či části stránky

Na dotaz jednoho ze čtenářů si v tomto článku ukážeme techniku, která se snad bude hodit i mnohým dalším: dynamickou změnu barvy tabulky (případně její buňky, případně celé části stránky) po nějaké akci uživatele pomocí JavaScriptu – například po kliknutí na odkaz.

Ukázku tentokrát najdete na samostatné stránce – klikněte zde a vyzkoušejte si ji.

Technika, kterou je změna barvy docílena, se opírá o HTML tag SPAN – což je na jednu stranu nástroj, jak se s oblibou říká, mocný, na druhou stranu jsou s ním v praxi pořád nějaké problémy: je totiž tak trochu přecitlivělý na správnou syntaxi i na správné zasazení do kontextu stránky. Tak se i na profesionálních stránkách velkých (internetových) firem občas setkáme s tabulkou majestátně plovoucí středem obrazovky a zakrývající vše co je pod ní, nebo naopak „ustřelující“ někam daleko za obzor vymezený obvyklou šířkou stránky. Problémy také dopředu signalizuje to, že prakticky veškerý obslužný skript pro tagy SPAN je nutno psát dvojmo, zvlášť pro každé z rozhádaných dvojčat Internet Exploreru a Navigatoru. Vřele tedy doporučuji před publikováním techniky založené na SPAN testovat, testovat a ještě jednou testovat, nebo uvážit jejich přínos a obratně se jim vyhnout.

Po tomto odrazujícím úvodu zpět k diskutovanému problému. HTML kód tabulky, jejíž buňce měníme barvu, může vypadat třeba nějak takto:

Na samotné tabulce není nic neobvyklého, důležitý je samozřejmě onen tag SPAN, použitý v první buňce prvního řádku a zapouzdřující její obsah. Ten vymezuje – nepřesně řečeno – v HTML stránce jakousi „sekci“, pro niž měníme níže uvedeným skriptem barvu pozadí. Atribut id (zde s hodnotou „AA“) určuje jméno oné „sekce“, co se týká inline stylu, ten je potřeba definovat minimálně v uvedeném rozsahu. Pokud definici inline stylu vynecháte, změna barvy nebude pracovat spolehlivě, pokud nějaké parametry stylu přidáte nebo změníte, funkčnost by měla zůstat zachována (testovat, testovat et cetera).

Odkazy, uvedené pod tabulkou, volají JavaScriptovou funkci, která mění barvu buňky tabulky. Místo odkazů lze také použít tlačítka s definovaným handlerem onClick, případně i jiné vymoženosti.

Samotná funkce changeColor je, jak již bylo řečeno, psána dvojmo pro oba nejrozšířenější prohlížeče – první půlka pro Internet Explorer, druhá pro Navigator (ve verzi 6 Navigatoru ale nazafunguje ani jedna, důvody již byly na stránkách Intervalu několikrát diskutovány). První parametr funkce udává jméno „sekce“, pro níž měníme barvu, druhý novou hodnotu barvy – předává se přímo HTML kód barvy. Zde je funkce changeColor:

No a to je pro tentokrát vše, nebo – téměř vše. Zbývá dodat jen pár postřehů (a mnozí z vás určitě v diskusi dodají další):

• do tagu SPAN lze zapouzdřit daleko více než jedinou buňku tabulky – celou tabulku, obrázky atp – tak lze měnit barvu pozadí pro celé velké části stránky najednou.
• samozřejmě lze skriptem měnit i další atributy než jen barvu pozadí – mnohé z efektů rolujících a jinak poskakujících textů jsou založeny právě na využití tagu SPAN. Máte-li chuť do experimentování, je právě zde obrovský prostor pro další vylepšování.

Přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.