Obsah
- Základní kurzory myši
- Vlastní kurzory myši
- Změna stylu kurzoru pomocí vloženého JavaScriptu
- Hraní s funkcemi
Změna kurzoru myši je jednoduchý způsob, jak přidat speciální efekty na webovou stránku. To může zlepšit použitelnost tím, že uživatelům poskytne další vizuální pomůcky, zejména na složitějších stránkách, jako jsou hry a interaktivní mapy. Můžete použít Javascript změnit styl kurzoru podle data, počasí a cokoliv jiného. Technika použití Javascriptu, HTML a CSS pro tvorbu dynamických webových stránek je známa jako DHTML (Dynamic HTML).
Základní kurzory myši
Existuje několik standardních kurzorů myši, které lze použít úpravou stylu prvku nebo těla stránky. Jména jsou výchozí, nitkový kříž, ruka, pohyb, text, čekání a pomoc. Další informace o nich naleznete v odkazu "Vlastnost kurzoru CSS" v části "Zdroje". Použijte CSS k definování kurzoru, který bude zobrazen při přechodu přes element následujícím způsobem:
Cross-hair
Vlastní kurzory myši
Kromě základních kurzorů můžete použít vlastní šablony nastavením adresy obrazového souboru jako stylu kurzoru, jako v následujícím příkladu:
Vlastní kurzor
Ne všechny prohlížeče tuto funkci nebo všechny typy souborů podporují. Aplikace Internet Explorer například očekává soubory s příponou ".cur" nebo ".ani". Firefox neakceptuje animované kurzory (".ani") a očekává základní kurzor za obrazem. Pro dosažení nejlepších výsledků označte soubor s kurzorem (".cur" nebo ".ani"), obrazový soubor (PNG, JPEG nebo GIF) a základní typ kurzoru jako zálohu. Následující příklad používá animovaný kurzor jako první volbu, jednoduchý soubor na druhém místě a základní kurzor jako poslední možnost. Prohlížeč vyzkouší všechny možnosti, dokud nenajdete ten, který můžete použít:
Vlastní kurzor
Knihovna Otevřít kurzor v sekci Prostředky nabízí kolekce kurzoru myši.
Změna stylu kurzoru pomocí vloženého JavaScriptu
CSS styl kurzoru můžete změnit pomocí Javascriptu. Existuje několik atributů HTML, které se týkají akcí myši, které lze použít k provedení kódu klepnutím, přesunutím nebo vznášením nad prvkem stránky. Některé příklady jsou:
onmouseover: Ukazatel myši přejde přes prvek. onmousedown: Tlačítko myši je stisknuto. onmouseup: Tlačítko myši je uvolněno. onmouseout: Ukazatel myši opustí prvek. ondblclick: Uživatel poklepává myší.
V sekci "Atributy" sekce "Atributy" najdete další atributy, které můžete použít k přidání akcí pomocí Javascriptu.
Přidejte akci do události (například "mouseover") nastavením kódu, který chcete spustit jako hodnotu atributu. V níže uvedeném příkladu se kurzor změní na „nápovědu“ tak, že umístíte ukazatel myši nad odkaz.
Nápověda
Hraní s funkcemi
Někdy budete chtít provést více než jeden atribut. Zapsáním všech akcí do funkce Javascript můžete umístit celý kód do horní části dokumentu HTML a aplikovat jej na libovolný prvek provedením volání v atributu události. Následující kód změní kurzor na prvek předaný jako parametr "el":
funkce setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), nitkový kříž" GO}
Funkce bude umístěna v sekci skriptu hlavičky dokumentu (mezi tagy
a ) nebo v externím kódovém souboru, na který se odkazuje ve stejné části. Chcete-li jej použít, zavolejte funkci s klíčovým slovem "this" z atributu události ve značce HTML. Funkce obdrží odkaz na prvek spojený s událostí myši a změní styl kurzoru. Pokud například ukazatel přeskočí přes následující text, kurzor se změní:Kurzor se na tomto odkazu změní
Můžete také změnit hlavní kurzor, který se zobrazí při přechodu na dolní část stránky. Následující funkce vám umožní změnit kurzor na typ uvedený v parametru "curtype":
funkce setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), wait"; break GO case "forbidden": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), výchozí"; break GO case "default": default: document.body.style.cursor = "url (arrow.cur), výchozí" GO}}
Chcete-li jej použít, zavolejte na něj atribut „loading“, „zakázáno“ nebo „výchozí“ z atributu události ve značce HTML. Následující tlačítko například změní kurzor na "načtení" při kliknutí:
Jazyk Javascript má neomezené funkce. Níže uvedený kód se bude odpočítávat a každá sekunda změní kurzor myši na obrázek spojený s aktuální hodnotou. Funkce "setTimeOut" ponechá funkci pozastavenou na jednu sekundu před vyvoláním a aktualizací čítače.
funkce doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), výchozí" GO}}
Po kliknutí na tlačítko ve formuláři se na webové stránce pomocí funkce zobrazí počet kurzorů myši.