ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Logo za kurzorem myši ve stránce

2. června 2002
•
Pavel Růžička

Související

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.

Předchozí článek Synchronizace dat pomocí standardního FTP klienta Windows
Další článek Naučte se Javu - třídy a objekty 2.
Štítky: Články
Pavel Růžička

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *