Poskakující obrázek na www stránkách

14. prosince 1999

•

Co říkáte na možnost mít na www stránce prvek (např. obrázek), který bude za všech okolností viditelný, ať je se stránkou libovolně rolováno? Navíc, prvek může fungovat jako odkaz na libovolné místo na vašem webu.

Určitě jste již někdy navštívili server GeoCities, na jehož stránkách kdysi poskakovalo (a které dnes jej zrovna nemůžu najít) logo serveru. Bylo neustále viditelné a bylo úplně jedno, na jakém místě stránky jste se zrovna nacházeli – něco podobného si vytvoříme i zde. Některé uživatele může ovšem poskakující logo rušit a tak bych doporučil dávat poskakující obrázek jenom na weby, kde je to podle vás nezbytné. Pokud si tento článek čtete pomocí prohlížeče nejméně čtvrté generace, zkuste se nyní podívat do pravého horního rohu, kde naleznete poskakující ikonu Intervalu:o)

Na serveru Geocities fungoval poskakující obrázek tak, že si server nejprve zjistil, jakým prohlížečem je stránka prohlížena a podle toho poslal specifický kód, který fungoval v daném prohlížeči. My to uděláme podobně, jenom s tím rozdílem, že vytvoříme pomocí dynamického HTML pouze jednu verzi kódu, který bude fungovat v obou prohlížečích.

Jsou dva způsoby, jak tohoto efektu dosáhnout – pokud máte stránky optimalizovány pro Internet Explorer, můžete do stránky vložit tento HTML kód <body background=“images/pozadi.gif“ bgproperties=fixed>, který na stránku vloží obrázek zafixovaný na pozadí – v praxi to vypadá tak, že obrázek zůstavá na stále stejném místě a při rolování se posunuje pouze text. Nevypadá to ovšem příliš pěkně a navíc to nefunguje v Netscape Navigatoru.

Tvorba prvku

První, co musíme udělat, je to, že si vytvoříme samotný poskakující prvek – může to být libovolný HTML kód nebo obrázek, který je výhodnější z toho důvodu, že má přesně stanovené rozměry, které musíte nadefinovat ve scriptu. Promyslete si také, jak bude prvek vypadat – měl by každopádně ladit s vašimi stránky, aby příliš čtenáře nerušil. My budeme pro demonstraci používat ikonu Interval.cz

HTML a JavaScript kód

Jakmile máte nějaky prvek – v našem případě je to ikona – vytvořený, vložte do stránky následující HTML kód, který prvek načte a který zajistí, že prvek bude současně fungovat jako odkaz.

To ovšem není vše – nyní musíme zajistit ono poskakování prvku při rolování stránky, což učiníme pomocí následujícího JavaScriptu (můžete jej zkopírovat):

Ve výše uvedeném JavaScriptu jsou pro vás duležité tyto proměnné, které můžete libovolně měnit – width, height, poziceX, poziceY a logotwo.

Hodnoty proměnných width a height by měly být stejné jako výška a šířka vašeho poskakujícího prvku. Pokud je váš poskakující prvek tvořen HTML kódem – který jednoduše vložíte místo obrázku mezi tagy <DIV> a </DIV> -, snažte se rozměry nadefinovat co nejpřesněji.

Proměnné poziceX a poziceY slouží k umístnění prvku na stránce. Hodnoty jsou uváděny v procentech. V našem příkladě jsou zde nastavena čísla 100 a 0, která zapříčiní, že prvek je umístněn v pravém horním rohu. Pokud zde vložíte 0 a 100 obrázek bude v levém dolním rohu, pokud zde budou čísla 100 a 100, prvek bude vpravo dole a pokud zde budou hodnoty 50 a 50, prvek bude umístněn přesně uprostřed monitoru apod.

A poslední proměnnou, která vás může zajímat je „logotwo“, která určuje, za jak dlouho má prohlížeč aktualizovat pozici prvku. Menší číslo značí rychlejší aktualizaci. Pokud uvedete nulu, prvek se objeví pouze jednou a na vrcholu stránky.