C# - "Szálkereszt" megjelenítése weblapon

forráskód letöltése
Cikkünkben újabb kliens-oldali script-ekkel ismerkedhetünk meg, melyek ötleteket adhatnak, illetve újabb megvalósításokra ösztönözhetnek. A példaalkalmazás egyik megvalósítása egy szálkereszt, melynek metszéspontja az egérmutató aktuális pozíciójában van. Az alkalmazás másik kis kódja segítségével egy zenei aláfestést adhatunk az oldal betöltődésekor.
Mellékelt példa megnyitása előtt szükséges egy SCScripts nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A zenei állomány lejátszásához telepített hangkártyával, és bekapcsolt hangszóróval kell rendelkeznünk.
A lap betöltődésekor megjelenik egy vízszintes és egy függőleges vonal, melyek az aktuális kurzorpozícióban metszik egymást. A metszéspont koordinátái egy címkén megjelenítésre kerülnek.
Szálkereszt megjelenítése
A szálkereszt tulajdonképpen nem más, mint két egymásra merőlegesen „fektetett” DIV objektum, melyek közül az egyiknek a szélessége, másiknak a magassága 1 pixel.
A két DIV kontrolt a lap töltődésekor, dinamikusan hozzuk létre:
document.write("<div id='hy' class='szk'></div>");
document.write("<div id='hx' class='szk'></div>");
Az egér mozgásakor a doMove függvény hajtódik végre, melyben megadjuk a koordinátákat.
function doMove()
{
  y = event.clientY-4;
  x = event.clientX-4;
  doProcess();
}
document.onmousemove = doMove;
A doProcess függvényben végezzük a mozgatást. Először lekérdezzük a képernyő kliensterületére, valamint a görgetősáv pozícióira vonatkozó információkat.
function doProcess()
{
  cH = document.body.clientHeight;
  cW = document.body.clientWidth;
  sT = document.body.scrollTop;
  sL = document.body.scrollLeft;
Majd minden egyes kurzormozgáskor megadjuk a két kontrol szélességét, és magasságát, valamint x, és y pozícióit. A könnyebb kezelés érdekében tx, és ty fogja reprezentálni a két kontrolt.
  ty = document.getElementById("hy").style;
  tx = document.getElementById("hx").style;
A függőleges vonal DIV-je 1 pixel széles, és a magassága a képernyő kliensterületének magassága.
  ty.height = cH;
  ty.width = 1;
A vízszintes vonal DIV-je 1 pixel magas, és szélessége a képernyő kliensterületének a szélessége.
  tx.height = 1;
  tx.width = cW;
A pozícióra vonatkozó adatok:
  ty.top = sT;
  ty.left = x;
  tx.top = y + sT;
  tx.left = sL;
A koordinátákat megjelenítjük a címkén.
  document.all.Label1.innerText = "X: " + event.clientX + "px ; Y: " + event.clientY + "px";
}
window.document.body.onscroll = doProcess;
Háttérzene megszólaltatása
A háttérzene indításához egy <BGSOUND> nevű tagot kell elhelyeznünk a lap tetszőleges részén, majd SRC attribútumában megadni, hogy a lejátszandó zenei állomány milyen elérési útvonalon található.
<bgsound src="chimes.wav" loop="infinite">
A LOOP attribútumban adható meg, hogy hány alkalommal játszódjon le az állomány. -1 esetén (példánkban) szünet nélkül szól, amíg az oldalt el nem hagyjuk. 0 esetén egy alkalommal játszódik le. Tetszőleges alkalommal is lejátszhatjuk, ekkor ennek számát kell itt megadni.