Obsah
- Základné kurzory myši
- Vlastné kurzory myši
- Zmena štýlu kurzora s Inline Javascript
- Prehrávanie s funkciami
Zmena kurzora myši je jednoduchý spôsob, ako pridať špeciálne efekty na webovú stránku. To môže zlepšiť použiteľnosť tým, že poskytuje užívateľom dodatočné vizuálne pomôcky, najmä na zložitejších stránkach, ako sú hry a interaktívne mapy. Na zmenu štýlu kurzora podľa dátumu, počasia a čohokoľvek iného môžete použiť Javascript. Technika používania Javascript, HTML a CSS na vytváranie dynamických webových stránok je známa ako DHTML (Dynamic HTML).
Základné kurzory myši
Existuje niekoľko štandardných kurzorov myši, ktoré možno použiť úpravou štýlu elementu alebo tela stránky. Mená sú predvolené, nitkový kríž, ruka, pohyb, text, čakanie a pomoc. Viac informácií o nich nájdete v časti "Vlastnosť CSS kurzora" v sekcii "Zdroje". Použite CSS na definovanie kurzora, ktorý sa zobrazí pri prechode elementom nasledovne:
Cross-vlasy
Vlastné kurzory myši
Okrem základných kurzorov môžete použiť vlastné šablóny nastavením adresy súboru obrázka ako štýlu kurzora, ako v nasledujúcom príklade:
Vlastný kurzor
Nie všetky prehliadače podporujú túto funkciu alebo všetky typy súborov. Napríklad program Internet Explorer očakáva súbory s príponou „.cur“ alebo „.ani“. Firefox neakceptuje animované kurzory (".ani") a očakáva, že za obrázkom bude základný kurzor. Pre dosiahnutie najlepších výsledkov označte súbor s kurzorom (".cur" alebo ".ani"), súbor s obrázkom (PNG, JPEG alebo GIF) a základný typ kurzora ako zálohu. Nasledujúci príklad používa animovaný kurzor ako prvú voľbu, jednoduchý súbor na druhom mieste a základný kurzor ako poslednú možnosť. Prehliadač vyskúša všetky možnosti, kým nenájdete ten, ktorý môžete použiť:
Vlastný kurzor
Knižnica otvorených kurzorov v sekcii Zdroje ponúka zbierky voľných kurzorov myši.
Zmena štýlu kurzora s Inline Javascript
Štýl CSS kurzora môžete zmeniť pomocou Javascript. Existuje niekoľko atribútov HTML, ktoré sa vzťahujú na akcie myši, ktoré možno použiť na spustenie kódu kliknutím, presunutím alebo vznášaním sa nad elementom stránky. Niektoré príklady sú:
onmouseover: Ukazovateľ myši prechádza cez element. onmousedown: Tlačidlo myši je stlačené. onmouseup: Tlačidlo myši sa uvoľní. onmouseout: Ukazovateľ myši opustí prvok. ondblclick: Používateľ dvakrát klikne myšou.
V sekcii "Atribúty" sekcie "Atribúty" nájdete ďalšie atribúty, ktoré môžete použiť na pridanie akcií pomocou jazyka Javascript.
Pridajte akciu k udalosti (napríklad "mouseover") nastavením kódu, ktorý chcete spustiť ako hodnotu atribútu. V nasledujúcom príklade sa kurzor zmení na "pomocník" tak, že sa presuniete nad odkaz.
pomôcť
Prehrávanie s funkciami
Niekedy budete chcieť urobiť viac ako jeden atribút umožňuje. Zapísaním všetkých akcií do funkcie Javascript môžete vložiť celý kód do hornej časti dokumentu HTML a použiť ho na ľubovoľný prvok uskutočnením hovoru v atribúte udalosti. Nasledujúci kód zmení kurzor na element prešiel ako parameter "el":
funkcia setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), krížik" GO}
Funkcia sa nachádza v časti skriptu hlavičky dokumentu (medzi tagmi
a ) alebo v externom kódovom súbore, na ktorý sa odkazuje v tej istej časti. Ak ho chcete použiť, zavolajte funkciu s kľúčovým slovom "this" z atribútu udalosti v značke HTML. Funkcia dostane odkaz na prvok spojený s udalosťou myši a zmení štýl kurzora. Ak napríklad ukazovateľ preskočí cez nasledujúci text, kurzor sa zmení:Kurzor sa na tomto odkaze zmení
Môžete tiež zmeniť hlavný kurzor, ktorý sa zobrazí pri vznášaní nad spodnou časťou stránky. Nasledujúca funkcia vám umožní zmeniť kurzor na typ uvedený v parametri "curtype":
funkcia 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), predvolené"; break GO case "default": predvolené: document.body.style.cursor = "url (arrow.cur), predvolené" GO}}
Ak ju chcete použiť, zavolajte na ňu „loading“, „zakázané“ alebo „predvolené“ z atribútu udalosti v značke HTML. Pri kliknutí na toto tlačidlo sa napríklad zmení kurzor na možnosť „načítať“:
Jazyk Javascript má neobmedzenú funkcionalitu. Nižšie uvedený kód sa bude odpočítavať a každá sekunda zmení kurzor myši na obrázok priradený k aktuálnej hodnote. Funkcia "setTimeOut" ponechá funkciu pozastavenú na jednu sekundu pred vyvolaním a aktualizáciou počítadla.
funkcia 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), predvolené" GO}}
Po kliknutí na tlačidlo vo formulári na webovej stránke použite funkciu zobrazenia počtu na myši.