Pohyb objektem ve VBS
V tomto článku si ukážeme jak rozpohybovat obrázek, nebo i jiný objekt HTML stránky s pomocí jednoduchého VisualBasic Scriptu.
V tomto článku vám převedu, jak pomocí jednoduchého VisualBasic skriptu rozpohybovat na vaší HTML stránce obrázek nebo i jiný objekt, kterému lze nastavit absolutní pozici a je u něj definovaná výška a šířka.
V příkladu budeme potřebovat dva objekty. První je document.body a druhý document.all.nazev_objektu. Konkrétně budeme potřebovat z prvního objektu hodnoty clientwidth a clientheight v nichž je přesná šířka a výška okna prohlížeče pro samotný obsah HTML stránky v pixelech (bez případných scrollbarů, příkazových lišt atd…). V případě, že HTML stránka je vyšší či širší než okno prohlížeče a my chceme aby byl „létající“ předmět vždy v zobrazované části HTML stránky, budeme potřebovat ještě hodnoty scrollleft a scrolltop, které nesou informace o tom, o kolik pixelů bylo stránkou posunuto vertikálně a horizontálně.
Z druhého objektu budeme potřebovat hodnoty offsetwidth a offsetheight, které obsahují šířku a výšku objektu se kterým budeme hýbat. Pro určení absolutní pozice na stránce pak tomuto objektu budeme přidělovat CSS styl pixelleft a pixeltop.
Nejdříve budeme na stránku muset umístit objekt se kterým budeme pohybovat. V našem příkladu se jedná o obrázek, takže HTML tag bude vypadat následovně:
<IMG SRC=“obrazek.gif“ id=“ruze“ style=“LEFT: 0px; TOP: 0px; POSITION: absolute;“>
Abychom mohli s objektem jednoduše nakládat pomocí skriptu, budeme mu muset nastavit ID. V tomto příkladu je ID ruze. Musíme obrázku (objektu) nastavit absolutní pozici. Dále pak budeme muset do tagu BODY vložit událost onLoad=“Inicialitace“, která inicializuje náš pohyb objektem. Součástí stránky je samozřejmě samotný skript:
<script language=vbscript>;<!–
‚ definujeme proměnná, které budeme využívat
Option Explicit
Dim X, Y, X1, Y1, MaxScrollX, MaxScrolly, Ruzka, DocB
Sub Inicializace
‚ x a y obsahují absolutní pozici objektu na HTML stránce
x = 0
y = 0
‚ x1 a y1 nesou velikost „skoku“ objektu
‚ v pixelech a jedné pohybové fázi.
x1 = 4
y1 = 4
‚ nastavíme výchozí proměnné a interval ve kterém
‚ se bude skript provádět – jde vlastně o rychlost pohybu
‚ hodnota je v milisekundách – 1000 = 1 sekunda
window.Setinterval „Animuj“, 10
End Sub
Sub Animuj
‚ pro přehlednost definujeme proměnné s objekty
set docb = document.body
set ruzka = document.all.ruze
‚ pohneme objektem v obou směrech (vertikální i horizontální)
x = x + x1
y = y + y1
‚ maximální délka pohybu vychází ze šířky (výšky) prohlížeče
‚ a šířky (výšky) objektu.
maxscrollx = (docb.clientwidth – ruzka.offsetwidth)
maxscrolly = (docb.clientheight – ruzka.offsetheight)
‚ pokud objekt „narazí“ na pravý okraj stránky,
‚ budeme s ním pohybovat doleva
if x >= (maxscrollx + docb.scrollleft) then
x = (maxscrollx + docb.scrollleft)
‚ nastavíme pohyb doleva
x1 = -4
end if
‚ pokud objekt narazí do levého okraje stránky
‚ začneme s ním pohybovat doprava
if x <= docb.scrollleft then
x = docb.scrollleft
‚ nastavíme pohyb doprava
x1 = 4
end if
‚ pokud objekt narazí do spodního okraje stránky
‚ začneme s ním pohybovat nahoru
if y >= (maxscrolly + docb.scrolltop) then
y = (maxscrolly + docb.scrolltop)
‚ změna pohybu
y1 = -4
end if
‚ pokud objekt narazí do horního okraje stránky
‚ začneme s ním pohybovat dolů
if y <= docb.scrolltop then
y = docb.scrolltop
‚ nastavení pohybu dolů
y1 = 4
end if
‚ objektu nastavíme absolutní pozici na HTML stránce
ruzka.style.pixelleft = x
ruzka.style.pixeltop = y
End Sub
–>
Skript se bude spouštět v pravidelném intervalu, který jsme definovali v inicializační fázi skriptu. Skript nejdříve určí budoucí pozici objektu a maximální délku, o kterou se může objekt v rámci okna pohnout. Následně otestuje, zda objekt náhodou nenarazí (nebo se dokonce neposune za) některý z okrajů HTML stránky. Test spočívá ve srovnání nové pozice objektu a součtu maximálního pohybu s hodnotou případného posunu stránky. Pokud objekt přesáhne některého z okrajů stránky, nastaví se budoucí pozice na hodnotu, která je součtem maximálního pohybu s hodnotou případného posunu stránky, tím zajistíme, že objekt zůstane viditelný celý a nastavíme proměnné x1 nebo y1 (nebo obě – záleží na tom, do kterého okraje či okrajů objekt narazí) na opačnou hodnotu (pokud objekt narazí do pravého nebo dolního okraje bude nová hodnota záporná, v opačném případě bude hodnota kladná). Na závěr nastavíme objektu absolutní hodnotu obsaženou v proměnných x a y.
Takže tímto jsem vám popsal jednoduchý VB skript, který rozhýbe různé objekty na vaší HTML stránce a tím jí udělá interaktivnější. Bohužel tento skript funguje jen v prohlížečích Internet Explorer 5 a vyšší (možná funguje i v IE 4, ale není to odzkoušeno). Ovšem není problém tento skript přepsat do JavaSriptu, pak by měl běžet i na prohlížečích Netscape Navigator, které nemají implementovánu podporu Visual Basic skriptu. Ukázková stránka se nachází zde. Příklad si můžete stáhnout v archivu