Prepínač obrázkov v JavaScripte

Viem, je to staré, je to prefláknuté, ale dosiaľ mi nepadol prepínač obrázkov (z náhľadu na väčší) na žiadnom webe tak do oka, ako na Mobile Feed Reader, kde je JavaScript použitý na prepínanie screenshotov. Nejde o žiadny významný kus kódu, ale výsledok jeho aplikácie mi tam sadol ako uliaty.

Prepínač v odkazovanom webe je riešený prostredníctvom malého kódu v JavaScripte a udalosťou OnClick v tagu img:

Javascript:

var toggler = 1
function toggle(img,fname) {
if (toggler == 1) {
img.src = fname+".gif"
} else {
img.src = fname+"_thm.gif"
}
toggler = toggler * -1
}

Obrázok sa vloží nasledovne:

<img src="obrazok_thm.gif" onclick="toggle(this,'obrazok')" />

Po kliknutí na obrázok, sa bez prechodu na novú stránku alebo okna, nahrádza pôvodný obázok novým, po ďalšom kliknutí opačne.

Pre lepšie pochopenie si môžte prehliadnuť zdroják odkazovaného webu, prípadne som všetko vyextrahoval a pripravil do malého príkladu.

Inú variantu rovnakého riešenia je možné nájsť napríklad i na javascript.internet.com.

Som si vedomý, že nejde o nič svetoborné a takisto toto riešenie je nevhodné z hľadiska prístupnosti skrz použitý JavaScript, ale nemôžem si pomôcť, chcel som na to poukázať :-)

 

 

Autor:

Kategórie: