Vsebina
- Osnovni kazalci miške
- Kazalniki miške po meri
- Spreminjanje sloga kazalca z Inline Javascript
- Predvajanje funkcij
Spreminjanje kazalca miške je preprost način za dodajanje posebnih učinkov na svojo spletno stran. To lahko izboljša uporabnost z zagotavljanjem dodatnih vizualnih pripomočkov uporabnikom, zlasti na bolj kompleksnih straneh, kot so igre in interaktivni zemljevidi. Javascript lahko spreminjate glede na datum, vreme in karkoli drugega. Tehnika uporabe Javascripta, HTML in CSS za ustvarjanje dinamičnih spletnih strani je znana kot DHTML (Dynamic HTML).
Osnovni kazalci miške
Obstaja več standardnih miškinih kazalcev, ki jih lahko uporabite s spreminjanjem sloga elementa ali telesa strani. Imena so privzeta, navzkrižna, roka, premikanje, besedilo, čakanje in pomoč. Za več podrobnosti si oglejte povezavo »Lastnosti kazalnika CSS« v razdelku »Viri«. Uporabite CSS, da določite kazalko, ki bo prikazana pri prenašanju elementa, kot sledi:
Cross-lase
Kazalniki miške po meri
Poleg osnovnih kazalcev lahko uporabite predloge po meri tako, da naslov slikovne datoteke nastavite kot slog kazalca, kot v naslednjem primeru:
Kazalec po meri
Vsi brskalniki ne podpirajo te funkcije ali vseh vrst datotek. Internet Explorer na primer pričakuje datoteke z razširitvijo ».cur« ali ».ani«. Firefox ne sprejema animiranih kazalcev (".ani") in pričakuje osnovni kazalec nad sliko. Za najboljše rezultate navedite datoteko kazalca (".cur" ali ".ani"), slikovno datoteko (PNG, JPEG ali GIF) in osnovno vrsto kazalca kot varnostno kopijo. Naslednji primer uporablja animirano kazalko kot prvo izbiro, preprosto datoteko na drugem mestu in osnovno kazalko kot zadnjo možnost. Brskalnik bo preizkusil vse možnosti, dokler ne najdete tistega, ki ga lahko uporabite:
Kazalec po meri
Knjižnica odprtih kazalcev v razdelku Viri ponuja zbirke brezplačnih kazalcev miške.
Spreminjanje sloga kazalca z Inline Javascript
S klikom na Javascript lahko spremenite slog CSS-ja kurzorja. Obstaja več atributov HTML, povezanih z dejanji miške, ki jih lahko uporabite za izvajanje kode s klikom, premikanjem ali lebdenjem nad elementom strani. Nekaj primerov je:
onmouseover: Kazalec miške prehaja nad element. onmousedown: pritisnjen je gumb miške. onmouseup: sprosti se gumb miške. onmouseout: Kazalec miške zapusti element. ondblclick: Uporabnik dvakrat klikne miško.
V razdelku "Atributi" v razdelku "Atributi" boste našli več atributov, ki jih lahko uporabite za dodajanje dejanj z Javascriptom.
Dodajte dejanje dogodku (na primer »premik miške«), tako da nastavite kodo, ki jo želite zagnati, kot vrednost atributa. V spodnjem primeru se bo kazalec spremenil v »pomoč« z lebdenjem nad povezavo.
Pomoč
Predvajanje funkcij
Včasih boste želeli narediti več kot en atribut. S pisanjem vseh dejanj v funkciji Javascript lahko postavite vso kodo na vrh HTML dokumenta in jo uporabite za kateri koli element tako, da pokličete v atributu dogodka. Naslednja koda spremeni kazalko na element, ki je bil posredovan kot parameter "el":
funkcija setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), navzkrižno" GO "
Funkcija se bo nahajala v razdelku skripta glave dokumenta (med oznakami
in ) ali v zunanji kodni datoteki, navedeni v istem delu. Če ga želite uporabiti, jo pokličite s ključno besedo "this" iz atributa dogodka v oznaki HTML. Funkcija bo prejela sklic na element, ki je povezan z dogodkom miške, in spremenil slog kazalca. Če kazalec na primer preskoči naslednje besedilo, se kazalec spremeni:Kazalka se bo spremenila na tej povezavi
Spremenite lahko tudi glavno kazalko, ki se bo prikazala med lebdenjem nad dnom strani. Naslednja funkcija vam omogoča, da spremenite kazalec na vrsto, ki je navedena v parametru "curtype":
function setMainCursor (curtype) {stikalo (curtype) {primer "nalaganje": document.body.style.cursor = "url (working.ani), url (working.png), čakaj"; break GO primer "prepovedano": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), privzeto"; izklopi GO primer "privzeto": privzeto: document.body.style.cursor = "url (arrow.cur), privzeto" GO}}
Če ga želite uporabiti, jo označite kot "nalaganje", "prepovedano" ali "privzeto" iz atributa dogodka v oznaki HTML. Naslednji gumb bo na primer spremenil kazalec na "nalaganje", ko bo kliknjen:
Jezik Javascript ima neomejeno funkcionalnost. Spodnja koda bo odštevala in vsaka sekunda bo spremenila kazalec miške na sliko, povezano s trenutno vrednostjo. Funkcija "setTimeOut" bo funkcijo prekinila za eno sekundo, preden bo priklicana in posodobljena števec.
funkcija doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} drugo {document.body.style.cursor = "url (arrow.cur), privzeto" GO}}
Na spletni strani uporabite funkcijo za prikaz števila kazalca miške, ko kliknete gumb na obrazcu.