Az alkalmazás indítása után a „Virtuális mappa létrehozása” feliratú nyomógombra kell kattintanunk, melynek eredményeképpen a Web-szerveren létrejön egy, a Sample fizikai mappára mutató virtuális könyvtár.
A mellékelt példa egy Windows-os alkalmazás, melynek Form-ján egy Internet Explorer kontrolt helyeztünk el annak érdekében, hogy a Sample mappában található Test.htm oldalt betöltsük, és látható legyen a script által létrehozott hajszálkereszt.
A lap betöltődésekor tehát 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.
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 reprezentálja 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.coo.innerText = "X: " + event.clientX + "px ; Y: " + event.clientY + "px";
}
window.document.body.onscroll = doProcess;
Az IE kontrol felületén mozgatva a metszéspont is mozog, koordinátái megjelennek a lapon. A művelet végén – amennyiben már nincs szükségünk a mappára – a „Virtuális mappa törlése” feliratú nyomógomb megnyomásával törölhetjük a mappát.
A Test.htm lapot a böngésző kontrol Navigate2 metódusával tölthetjük be.
Url := 'http://localhost/Sample/Test.htm';
WebBrowser1.Navigate2(Url, Flags, TargetFrameName, PostData, Headers);