Jako zvláštní doplněk je možno do stránky přidat logo, které se bude zobrazovat těsně vedle kurzoru myši. Obrázek musí být decentní, spíše menší a co nejprůhlednější, jinak vytvoříme ve stránce rušivou „obludku“.

V principu jde o vrstvu, která je velká stejně jako použitý obrázek a je nastavena dostatečně v popředí (pomocí z-index). Dostatečně v popředí proto, aby nám při přejetí myší přes objekt, který by měl vyšší z-index než náš kurzor, nezmizel za ním. JavaScriptem budeme ve stránce při pohybu myší zjišťovat pozici kurzoru a podle této pozice měnit i absolutní pozici naší vrstvy s logem. To celé je nutné opatřit určitým testováním, zda je vůbec prohlížeč takových věcí schopen, a efektní kurzor myši je na světě.

Pro snadnější použití jsem soubor skriptu zvlášť vyňal do externího souboru cursorlogo.js. Nejprve si ukážeme umístění kurzoru do stránky, to je jednoduché:

<h1>Nadpis</h1>
<p>Nějaký text stránky…</p>
<div id=“cursor“ style=“position:absolute; left:650px; top:1000px; width:88px; height:19px; z-index:5″><img src=“cursorlogo.gif“ width=“88″ height=“19″></div>
<script language=“JavaScript“ src=“cursorlogo.js“></script>
</body>

Definici vrstvy s obrázkem kurzoru můžeme umístit kamkoli, nejlépe na konec souboru, volání skriptu však musí být až za ním, jinak by došlo k chybě při spuštění skriptu v okamžiku, kdy prohlížeč ještě o existenci vrstvy pojmenované cursor (název je nutno dodržet) nic neví. Všimněte si vysokého čísla v parametru top – je tak velké proto, aby se obrázek kurzoru umístil do „neviditelné“ části obrazovky a nebyl hned vidět. Je možné ho ale umístit kamkoli, třeba i do viditelné části tak, aby nevadil v designu v případě, že prohlížeč ho sice zobrazí, ale nebude umět posouvat za myší. Jakmile se pohne myší, obrázek přiskočí ke kurzoru myši a bude jej následovat.

Soubor cursorlogo.js:

function ap_getObj(name) { // oblíbená funkce zajišťující kompatibilitu práce s objekty v různých browserech
  if (document.getElementById)
    return document.getElementById(name).style;
  else
    if (document.all)
      return document.all[name].style;
    else
    if (document.layers)
      return document.layers[name];
}
function Trace_mouse(evnt) {
  if (is_DHTML && (navigator.userAgent.indexOf(„Opera“)== -1)) {
    if (evnt.pageX){
      X_pos=evnt.pageX; // nastavení pozice obrázku v Netscape a Opeře
      Y_pos=evnt.pageY;
    }
  }
  else{
    X_pos=(event.clientX + document.body.scrollLeft); // nastavit pozici obrázku v IE a DOM prohlížečích
    Y_pos=(event.clientY + document.body.scrollTop);
  }
  if (ReTrace_mouse)
    eval(ReTrace_mouse)
}
function Get_mouse_pos() { // zjistí pozici kurzoru myši
  x.left=X_pos+10 // nastavit novou pozici vrstvy obrázku (+10, aby nebyl obrázek pod kurzorem, ale vedle)
  x.top=Y_pos+10
}
var x = ap_getObj(‚cursor‘); // určit přístup k danému objektu (dle prohlížeče)
var is_DHTML=window.Event?true:false; // je prohlížeč schopen zjištovat pozici kurzoru?
var Y_pos = 0; // inicializace pozice obrázku
var X_pos = 0;
if (is_DHTML) {
  document.captureEvents(Event.MOUSEMOVE | Event.KEYUP); // sledovat pohyb myši v dokumentu a uvolnění klávesy v Netscape
  document.onkeyup=Trace_mouse; // při rolování oknem klávesnicí po uvolnění nastavit pozici obrázku
}
else
  window.onscroll=Trace_mouse; // v IE při rolování okna klávesnicí nastavovat pozici obrázku
document.onmousemove = Trace_mouse; // při pohybu myši nastavit novou pozici obrázku
ReTrace_mouse = ‚Get_mouse_pos()‘; // při pohybu myši ukládat aktuální pozici kurzoru

Skript pracuje ve většině prohlížečů, ne ve všech však bude následovat obrázek kurzor myši při rolování okna klávesnicí. Nehodí se vždy pro stránky, které obsahují hodně velké plochy flashe nebo prvků ActiveX, applety nebo vložené moduly. Tyto se totiž bez ohledu na z-index zobrazují vždy v popředí, a při přejetí myší náš obrázek „zmizí“.

Kompletní příklad je vám k dispozici.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět