JavaScript – změna obrázku při najetí kurzorem 2.

19. června 2000

•

Vážení čtenáři, nedávno jsem popisoval, jak překlápět obrázky pomocí JavaScriptu. Samotné překlápění, pokudmělo splňovat všechna kritéria ale vychází dost složité. Proto jsem slíbil, že čtenářům JavaScriptu ukáži mnohem jednodušší cestu, a to s využitím knihovny.

Protože překlápění obrázků je věc, která se používá dost často, rozhodl jsem se vyřešit tento problém jednou provždy. K tomu jsem napsal knihovnu, která se snadno používá. A tu teď dávám k dispozici vám všem pro volné použití. Dnešní článek bude sestávat z návodu, jak překlápět obrázky právě pomocí této knihovnu. Předem upozorňuji, že nebudu v tomto díle popisovat, co je pod kapotou knihovny, to nechám zatím na případných zvědavých čtenářích. Budu se soustředit pouze na to, jak jí používat pro překlápění obrázků.

Vlastní knihovnu představuje jediný soubor s názvem over_picture.js, který si můžete stáhnout zde. Tento soubor musíte potom nahrát do prostoru, kde máte uloženy webové stránky. Na začátek vaší stránky, či stránek, kde chcete používat překlápění obrázků, potom přidejte tuto knihovnu takto:

<html>
<head>
<title>Titulek stránky</title>
<script type="text/javascript" language="JavaScript" src="over_picture.js"></script>
<!– a tak dále, tady stránka pokračuje … –>

Pokud je knihovna over_picture.js umístěna v jiném adresáři, než je stránka, uveďte za atributem src= i cestu ke knihovně.

Dále je potřeba vytvořit těsně za značkou <body> soubor příkazů, které zaregistrují každý obrázek, který chcete překlápět. Řekněme, že budeme překlápět obrázek auta a vlaky. Potom by začátek stránky vypadal takto:

<html>
<head>
<title>Titulek stránky</title>
<script type="text/javascript" language="JavaScript" src="over_picture.js"></script>
</head>
<body>
<script type="text/javascript" language="JavaScript"> <!–
op_register("auto","auto_normal.png","auto_over.png");
op_register("vlak","vlak_normal.png","vlak_over.png");
// –>
</script>
<!– a tak dále, tady stránka pokračuje … –>

Jak vidíte, je to jednoduché, prostě pro každý obrázek, který budete překlápět, přidáte řádek s voláním funkce op_register, kde do závorek napíšete nejprve nějaké jméno, a potom jméno souboru s obrázkem pro normální stav a nakonec jméno souboru s obrázkem pro "překlopený stav", tedy pro stav, kdy je myš nad obrázkem. Kolik obrázků budete překlápět, tolik řádků s voláním op_register budete mít.

Potom už píšete normálně svojí stránku v HTML. Pouze na místo, kde se má vyskytnout překlápějící se obrázek, napíšete takovýto kód:

Všude, kde jsem napsal auto, musí být název, který byl zaregistrován předtím pomocí funkce op_register. A to je všechno. Sama knihovna řeší ostatní problémy za vás. Sama si kontroluje, zda prohlížeč je schopen překlápění, sama si přednačte všechny obrázky, a mnohé další.

Jak vidíte, je používání knihovny mnohem jednodušší, než když si budete všechno psát pokaždé sami. Tento díl jako tak trochu i lekcí sofwarového inženýrství. Pokud můžete při své práci využít šikovnou knihovnu napsanou a otestovanou někým jiným, a povede to ke zjednodušení a zrychlení vaší práce, určitě to udělejte. V ušetřeném čase můžete jít třeba do přírody.

A samozřejmě je vám k dispozici i stránka, kde můžete vidět překlápění obrázků napsané pomocí knihovny over_picture.js. Můžete jí použít i jako základ vašich stránek. Stránka je k dispozici zde.