Jednou ze skvělých možností webu je například to, že návštěvníci si mohou sami vybírat, jaké pozadí chtějí vidět na www stránkách. Kombinací jednoduchého JavaScriptu a HTML kódu můžete tuto možnost nabízet i svým návštěvníkům.

Skript se samozřejmě použít i k jiným účelům – například pokud vytváříte nové stránky, určitě se potýkáte s problémem výběru vhodné barvy pozadí webu. Skript tedy můžeme použít pro rychlý náhled na barvu stránky a vybrat nakonec tu, která se nám nejvíce líbí…

Pokud máte na pozadí na www stránce definovaný určitý obrázek, který se naskládá na celou viditelnou plochu stránky v prohlížeči, pak skript samozřejmě nebude fungovat, protože v případě konfliktní definice obrázku na pozadí www stránek a definice obrázku na pozadí www stránek v tagu <BODY> se použije definice obrázku.

Krok první

Začnete tak, že na začátek stránky – nejlépe do sekce <HEAD> umístněte následující JavaScript. Ve scriptu je vytvořena funkce, kterou jsem nazval jako zmenaPozadi, která má parametr hexaNumber a která se zavolá pomocí metody onclick při kliknutí na formulářové tlačítko. Metodou onclick současně předáváme vybranou barvu.

<SCRIPT language=“JavaScript“>
<!–
function zmenaPozadi(hexaNumber) {
document.bgColor=hexaNumber;
}
// –>
</SCRIPT>

Krok druhý

Do místa v HTML stránce, kde chcete mít vložena formulářová tlačítka, kterými vybíráte barvu pozadí, umístěte následující HTML kód z tabulky.

<FORM method=“post“ name=“background“>
<INPUT type=“button“ value=“Bílá“
onclick=“zmenaPozadi(‚White‘)“>
<INPUT type=“button“ value=“Černá“
onclick=“zmenaPozadi(‚black‘)“>
<INPUT type=“button“ value=“Modrá“
onclick=“zmenaPozadi(‚#6699FF‘)“>
<INPUT type=“button“ value=“Červená“
onclick=“zmenaPozadi(‚#FF3333‘)“>
<INPUT type=“button“ value=“Zelená“
onclick=“zmenaPozadi(‚#006600‘)“>
<INPUT type=“button“ value=“Šedá“
onclick=“zmenaPozadi(‚#CCCCCC‘)“>
<INPUT type=“button“ value=“Hnědá“
onclick=“zmenaPozadi(‚#996600‘)“>
</FORM>

Vyzkoušejte: barevná pozadí

Počet formulářových tlačítek, či barvy samotné můžete samozřejmě libovolně modifikovat. Skript by měl bez problému fungovat ve čtvrtých a vyšších verzích nejčastěji používanějších prohlížečů (IE a NN).

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

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

Žádný příspěvek v diskuzi

Odpovědět