Pohyb objektem ve VBS - Builder.cz - Informacni server o programovani

10. července 2001, 00.00 | V tomto článku si ukážeme jak rozpohybovat obrázek, nebo i jiný objekt HTML
stránky s pomocí jednoduchého VisualBasic Skriptu.

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
-->
</script>

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 zazipovaném archivu.