Prohlížečka obrázků
V jednom z předcházejících článků jsme si ukázali, jak s pomocí JavaScriptu docílit změny obrázku po jeho přejetí kurzorem myši. Dnes si ukážeme podobný skript, který umožní měnit obrázek umístěný na jiném místě stránky po najetí kurzorem na textový nebo obrázkový odkaz. Tímto způsobem lze vytvořit jednoduchou „prohlížečku“ obrázků.
Skript lze využít především při zobrazování různých variací téhož předmětu (např. barevné variace výrobku v internetové prodejně), a tím zpřehlednit a oživit Vaše webové stránky. (Původní skript viz předcházející článek.) Postup je následující. Nejdříve je nutné načíst obrázky, které se budou zobrazovat do cache počítače. K tomu využijeme příkaz new Image().
|
Tímto způsobem zabráníme tomu, aby prohlížeč natahoval obrázky ze serveru při jejich zbrazování. Obrázky již budou načtené v cache a tím bude jejich změna bude okamžitá. Záměna bude prováděna následujícím skriptem:
|
Ke změně dochází díky vlastnosti src, která je vztažena k objektu obr. Tento objekt zastupuje jméno příslušného obrázku, které představuje parametr name tagu <img> v HTML kódu. Proměnná nazev zase představuje jméno volaného GIF souboru. Skript lze samozřejmě upravit i pro jiné formáty, jako je JPG nebo PNG. Nyní zbývá jen přidat příslušný HTML kód, který bude obsahovat obrázek a textové odkazy.
|
Údaje v závorkách funkce change_image() udává jednak parametr name měněného obrázku a jméno volaného souboru (bez koncovky), který bude po přejetí myší po textovém odkazu zobrazen. Zde je ukázka našeho příkladu:
šedá zelená červená modrá
Prohlížeče bez podpory JavaScriptu ignorují tento skript a po kliknutí na odkaz zobrazí obrázek, jehož cesta je uvedena v parametru HREF tagu <a>, zatímco v prohlížečích s podporou klientských skriptů se po kliknutí nic neděje: to je zajištěno příkazem return false, který je volán metodou onClick.
Kód lze samozřejmě upravit tak, aby se např. po kliknutí objevil větší obrázek ve zvláštním okně. Zde je k dispozici celý zdrojový kód příkladu včetně obrázků ke stažení (20 kb).
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Thunderbolt 4 vs. OCuLink: Přišel čas na upgrade?
27. května 2024 -
Zabezpečení e-mailů: Jak můžete chránit vaši firemní komunikaci
13. prosince 2023 -
Jak se chránit před podvody na internetu – část 2
14. října 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024
vacziik
Kvě 22, 2010 v 15:55změny obrázku v uvedeném příkladu nefungují
Miroslav Kučera
Kvě 22, 2010 v 20:33vacziik: a proc myslite, ze tomu tak je? :-))