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