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

Asi před půlrokem vyšel na Intervalu článek pana Kučery, který popisoval výměnu obrázku za obrázek jiný při najetí kurzorem myši. Dnes se k tomu tématu vracíme – tentokráte s mnohem detailnějším popisem, jak vše funguje.

Pokud vezmete již nějaký existující JavaScript a snažíte se uzpůsobit na své stránky, ne vždy se vám jej podaří optimálně rozchodit. Není to způsobeno tím, že kód by byl špatný. U mnoha svých známých jsem se přesvědčil, že většinou nerozuměli tomu, co kód dělá, a výsledkem bývaly různé problémy. Proto se pokusím dnes pro všechny srozumitelně popsat, jak na to, a jak si ušetřit mnohé problémy.

Než budete číst dále, doporučuji vaší pozornosti původní článek >Změna obrázku při najetí kurzorem.

Samotný princip překlápění není složitý. V podstatě sestává z pouhých dvou kroků:

1. Pojmenovat si nějak obrázek, který se má vyměňovat. To je proto, abychom ho mohli ovlivňovat JavaScriptem. JavaScript totiž potřebuje nějak najít konkrétní obrázek, který má vyměnit.
2. Najít pojmenovaný obrázek a říci mu jméno nového obrázku.

Jak později uvidíte, takový kód pro překlápění obsahuje ještě jeden krok, a to přednačtení všech obrázků. To ovšem není krok nezbytný, ale velice doporučený. Rozebereme ho proto o několik odstavců dále.

Ještě, než začnu řešit konkrétní kroky, je potřeba napsat jedno upozornění. Překlápění obrázků pracuje pouze v Netscape Navigatoru od verze 3 a Internet Exploreru od verze 4. Budu se zde zabývat řešením, které pracuje v obou těchto prohlížečích.

Takže začínám pojmenováním obrázku. To lze snadno tím, že se přidá atribut name dovnitř značky <img>, která vlastně představuje obrázek:

<img name="obr1" src="obrazek1.gif">

Jak vidíte, zde jsem si pojmenoval obrázek jako obr1. Za atribut src, kam se normálně píše jméno souboru s obrázkem, napíšete jméno souboru s obrázkem, který se má objevovat, když je myš mimo obrázek.

Tím máme vyřešeno pojmenování obrázku. Teď je potřeba zajistit překlápění. Zde si vezmeme na pomoc atribut onMouseOver, který spustí příkaz v JavaScriptu když myš najede na obrázek. A také atribut onMouseOut, který spustí příkaz, když myš opouští obrázek. Potom to celé vypadá takto:

<a href="www.interval.cz" onMouseOut="self.document[‚obr1′].src=’obrazek1.gif‘;" onMouseOver="self.document[‚obr1′].src=’obrazek2.gif‘;"> <img name="obr1" src="obrazek1.gif" border="0"> </a>

Tento zápis předpokládá, že obrazek1.gif je obrázek, který se objevuje, je-li myš mimo. A obrazek2.gif se objevuje pouze, pokud přejedeme myší. Nejdříve si to vyzkoušejte, přejeďte myší přes obrázek, a potom budeme pokračovat ve vysvětlování:

Takže, co se vlastně děje. Nejdříve zkusím vysvětlit kód zapsaný za onMouseOver=. Tento kód se totiž spouští, když myší najedeme na obrázek. A zde mám zapsáno self.document[‚obr1′].src=’obrazek2.gif‘. Zápis self je jasný, znamená aktuální okno prohlížeče. self.document znamená HTML stránku v aktuálním okně prohlížeče. Zápis [‚obr1‘] říká, že bude vyhledána značka, která je pojmenována jako obr1. To je u nás právě náš obrázek. Protože je to obrázek, tak můžeme pokračovat ještě dále, a to jako src, který určuje jméno souboru s obrázkem. No a protože jsme napsali dále rovnítko = a jméno souboru, tak to znamená, že nastavujeme nové jméno souboru pro obrázek. Jinak řečeno, zobrazí se teď jiný obrázek.

To samé se děje pro onMouseOut, kde se naopak nastavuje obrázek nazpět. Vlastní atributy onMouseOver a onMouseOut jsou psány uvnitř značky <a>, která obaluje značku <img> s obrázkem. Značka <a> je tam ze dvou důvodů. Jednak proto, že se překlápějící obrázky často používají na odkazy, a také proto, že Netscape Navigator nepodporuje onMouseOut a onMouseOver uvnitř značky <img>.

Toto je celý princip. Pokud budete překlápět obrázků více, musíte každému dát jiné jméno v atributu name uvnitř značky <img>. Samozřejmě je to také potřeba přepsat uvnitř hranatých závorek [].

Musím ještě upozornit na malý problém. Pokud totiž podle tohoto návodu vyrobíte překlápějící se obrázky, načte se z internetu druhý obrázek až tehdy, když přejedete myší přes obrázek. Prostě ho prohlížeč dříve nepotřeboval a tak ho ani nenačetl. To je samozřejmě nepříjemný efekt, a proto se při řešení překlápění obrázků ještě přidává donucení prohlížeče, aby všechny obrázky načetl hned na začátku.

Jak se to dělá? Jednoduše. Založíme objekt typu Image, který představuje obrázek. A přiřadíme mu jméno souboru. V takovém případě prohlížeč načte obrázek hned na začátku, i když ho nepotřebuje zobrazit:

<script type="text/javascript" language="JavaScript"> <!–     var obr_1 = new Image();     obr_1.src = ‚obrazek2.gif‘; // –> </script>

Ve výše uvedeném příkladě jsem načetl obrazek2.gif, i když ho nikde nezobrazuji. Až ho bude potřeba zobrazit, tak už prohlížeč nebude chodit na internet, ale již ho má stažený u sebe.

Pro úplnost tedy uvádím, jak by vypadala stránka se dvěma překlápějícími se obrázky se vším všudy:

<html> <head> <title>Překlápění obrázků</title> </head> <body> <script type="text/javascript" language="JavaScript"> <!–     var auto_1 = new Image();     auto_1.src = ‚auto_1.gif‘;     var auto_2 = new Image();     auto_2.src = ‚auto_2.gif‘;     var pes_1 = new Image();     pes_1.src = ‚pes_1.gif‘;     var pes_2 = new Image();     pes_2.src = ‚pes_2.gif‘; // –> </script> <!– první obrázek – auto –> <a href="/auto/index.html" onMouseOut="self.document[‚auto‘].src=’auto_1.gif‘;" onMouseOver="self.document[‚auto‘].src=’auto_2.gif‘;"> <img name="auto" src="auto_1.gif" border="0"> </a> <!– druhý obrázek – pes –> <a href="/pes/index.html" onMouseOut="self.document[‚pes‘].src=’pes_1.gif‘;" onMouseOver="self.document[‚pes‘].src=’pes_2.gif‘;"> <img name="pes" src="pes_1.gif" border="0"> </a> </body> </html>

Jak můžete vidět, hned na začátku je načtení všech potřebných obrázků. A dále už to znáte z předchozího textu.

Pokud vaši čtenáři nepoužívají zastaralé verze Netscape Navigatoru, nebo Internet Exploreru, tak nemusíte číst dále. Pokud ano, tak se situace mírně komplikuje.

Pro dokonalost by ještě bylo potřebné zajistit, aby se nespouštěly skripty pro překlápění obrázků na prohlížečích, kde to nepracuje. Tedy pustit tyto skripty pouze na Netscape Navigatoru verze 3 a vyšší, nebo na Internet Exploreru verze 4 a vyšší. Pokud se vám podaří spustit tuto stránku na prohlížečích nižší verze, které přesto podporují JavaScript, může být prohlížeč zmaten a hlásit chyby.

Docela by mě zajímalo, jak pracuje překlápění obrázků na prohlížeči Opera. Pokud tedy někdo takový prohlížeč máte a pracuje vám překlápění obrázku při přejetí myší nad obrázkem výše, dejte mi, prosím, do diskuse vědět, stejně tak jako našim čtenářům.

Pokud tedy chcete být profesionální, a chcete, aby vaše překlápění obrázků pracovalo korektně i v nízkých verzích prohlížečů, je dobré si nejprve napsat funkci, která zjistí, zda máme před sebou prohlížeč, který podporuje překlápění obrázků:

function funguje_preklapeni() {     var browser_name = navigator.appName;     var browser_version = parseInt(navigator.appVersion);     var funguje =       (browser_name.indexOf("Netscape")>=0 && browser_version>=3)       ||       (browser_name.indexOf("Internet Explorer")>=0 && browser_version>=4);     return funguje; }

Podrobnější vysvětlení této funkce nechám na některý z dalších dílů, napíšu jenom, že funkce vrátí true, pokud prohlížeč podporuje překlápění obrázků, a false pokud nepodporuje. Koneckonců si to můžete hned vyzkoušet:

A poslední starostí je zajistit, aby se vaše příkazy pro překlápění nespouštěly, pokud funkce funguje_preklapeni nevrátí true. Uvedu příklad HTML stránky s jedním obrázkem, jak zajistit správnou funkci i pro prohlížeče nižší verze. Toto je tedy nejlepší a nejprofesionálnější stránka pro překlápění obrázků:

<html> <head> <title>Překlápění obrázků</title> </head> <body> <script type="text/javascript" language="JavaScript"> <!– function funguje_preklapeni() {     var browser_name = navigator.appName;     var browser_version = parseInt(navigator.appVersion);     var funguje =       (browser_name.indexOf("Netscape")>=0 && browser_version>=3)       ||       (browser_name.indexOf("Internet Explorer")>=0 && browser_version>=4);     return funguje; } if (funguje_preklapeni()) {     var kocka_1 = new Image();     kocka_1.src = ‚kocka_1.gif‘;     var kocka_2 = new Image();     kocka_2.src = ‚kocka_2.gif‘; } // –> </script> <!– obrázek – kočka –> <a href="/kocka/index.html" onMouseOut="if(funguje_preklapeni()) self.document[‚kocka‘].src=’kocka_1.gif‘;" onMouseOver="if(funguje_preklapeni()) self.document[‚kocka‘].src=’kocka_2.gif‘;"> <img name="kocka" src="kocka_1.gif" border="0"> </a> </body> </html>

Princip ošetření toho, aby vše správně pracovalo i v nižších verzích prohlížečů je přidání všeho do zápisu if(funguje_preklapeni()) plus příkaz. Zápis if nejdříve vyhodnotí funkci funguje_preklapeni. Pokud zjistí, že vrátí true, potom vykoná i příkaz za tím, jinak ho přeskočí. A to je to, co právě potřebujeme. Pokud prohlížeč neumí překlápět obrázky, potom prostě nebude vykonávat příkazy za if(funguje_preklapeni()), a vše je v pořádku.

Jak vidíte, komplexně vyřešit nějaký problém tak, aby to pracovalo se všemi prohlížeči, a za všech možných okolností, stojí někdy dost práce. Odměnou vám ale bude kvalitní přehazovač obrázků a spokojení návštěvníci s minimálním množstvím problémů. A o to by mělo jít především.

Protože překlápění obrázků je velice častá a potřebná věc, napsal jsem pro tyto účely knihovnu v JavaScriptu. Tato knihovna řeší komplexně všechny problémy kolem překlápění, a pracuje se s ní velice jednoduše. V dalším díle přinesu její popis, a dám jí k dispozici pro stažení.

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

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