Jednoduchá personalizace stránky pomocí JavaScriptu

5. ledna 2001

•

Nevíte, jaký vzhled stránky nejvíce vyhovuje vašim návštěvníkům? Nechte to na nich. V tomto článku si ukážeme, jak si může každý návštěvník vašich stránek pomocí JavaScriptu zvolit takový vzhled a barevnost, která mu nejvíce vyhovuje.

Pro uživatelské manipulace s barvami a vzhledem webu opět využijeme oblíbený JavaScript. Tentokrát však navíc přizveme na pomoc další mocný prvek moderních stránek: kaskádové styly. Z toho vyplývá, že popisovaná technika poběží jen na těch verzích prohlížečů, které CSS podporují – návštěvníci na historických verzích prohlížečů budou mít pro tentokrát smůlu.

Princip techniky je velmi jednoduchý. Vytvoříme několik „globálních“ souborů CSS, ve kterých nadefinujeme jednotlivé varianty vzhledu naší stránky. Tyto soubory pak budeme prohazovat pomocí malé javasciptové funkce v závislosti na požadavku návštěvníka.

Nyní si předvedeme malou ukázku. Abychom nerozhodili vzhled celého serveru Interval.cz, zobrazíme ji v novém okně. Po kliknutí zde se otevře nové okno s ukázkou. Pomocí tří odkazů uvedených v jeho spodní části můžete měnit vzhled okna.

Odkazy ve spodní části ukázkového okna volají funkci changecolor(colornr), zajišťující změnu vzhledu. Zde je HTML kód těchto odkazů:

<a href="javascript:changecolor(1)">Klikněte pro červený vzhled</a><br>
<a href="javascript:changecolor(2)">Klikněte pro zelený vzhled</a><br>
<a href="javascript:changecolor(3)">Klikněte pro modrý vzhled</a>

Funkce changecolor(colornr) je uvedena ve skriptu nejlépe v hlavičce stránky a vypadá takto:

function changecolor( colornr ){
document.cookie = colornr;
location.reload();
}

Uvedená funkce uloží do cookie požadované číslo barevného schématu a provede reload aktuální stránky. Samotné přiřazení čísla barevného schématu k linku na příslušný CSS soubor provádí následující skript, který tentokrát musí být uveden v hlavičce stránky (mezi tagy HEAD):

cookref = document.cookie;
if(cookref == "" ) {
cookref = 1
}
document.write("<link REL=\"STYLESHEET\" HREF=\"styl" + cookref + ".css\">");

Tento kód získá z cookie číslo barevného schématu, poté v případě, že žádné takové číslo v cookie nenajde, zvolí výchozí schéma číslo 1, a nakonec vytvoří odkaz na námi vytvořený soubor CSS, který je umístěn ve stejném adresáři jako ukázková stránka a jehož jméno je ve tvaru styl1.css, styl2.css, styl3.css atd.

Poznámky k příkladu

Proč nefunguje snažší řešení? Jednodušší variantou příkladu by totiž bylo neobtěžovat se s cookie, ale zapsat odkaz na výchozí CSS soubor přímo v HTML, a poté jej měnit pomocí funkce changecolor(colornr) takto:

function changecolor( colornr ){
document.links[0].href = "styl" + colornr + ".css";
location.reload();
}

Problém je v tom, že toto řešení nefunguje – reload stránky je nutný k tomu, aby se projevily změny ve vloženém CSS, avšak po reloadu je odkaz na CSS zapsaný přímo v HTML opět nastaven na výchozí hodnotu. Musíme si tedy zvolené číslo barevného schématu „někam“ uložit – jinými slovy, použijeme cookie.

Divoký JavaScript. Programátorům v JavaScriptu se už určitě zježily vlasy hrůzou nad způsobem, kterým jsem v tomto příkladu cookie použil. Berte jej prosím jako snahu o maximální jednoduchost v rámci ukázky – na webu, který cookie využívá ve větší míře, by bylo nutné zajistit sdílení cookie s ostatními prvky stránky či webu pomocí obvyklých uživatelsky definovaných funkcí GetCookie, SetCookie a zároveň zajistit, aby se zvolené barevné schéma promítlo i do dalších stránek webu. Popis problematiky cookies najdete na každém vývojářském webu včetně interval.cz

To je pro tentokrát vše, přeji vám příjemný den.

Předchozí článek Homesite 4.5 - kompletní seznam klávesových zkratek

Další článek ImageReady 3 - jednoduché vytvoření rollover efektů