Sisu
- Hiirekursorid
- Kohandatud hiirekursorid
- Kursori stiili muutmine Inline Javascriptiga
- Funktsioonidega mängimine
Hiirekursori muutmine on lihtne viis oma veebilehe eriefektide lisamiseks. See võib parandada kasutatavust, pakkudes kasutajatele täiendavaid visuaalseid abivahendeid, eriti keerulisematel lehtedel nagu mängud ja interaktiivsed kaardid. Võite kasutada JavaScripti kursori stiili muutmiseks vastavalt kuupäevale, ilmale ja muule. Dünaamiliste veebilehtede loomiseks kasutatava Javascript, HTML ja CSS kasutamise tehnika on tuntud kui DHTML (dünaamiline HTML).
Hiirekursorid
On mitmeid standardseid hiirekursoreid, mida saab kasutada elemendi või lehe keha stiili muutmise teel. Nimed on vaikimisi, risti, käsi, liikuda, teksti, oodata ja abi. Lisateavet nende kohta leiate peatükis "Ressursid" olevast "CSS Cursor Property" lingist. Kasutage CSS-i, et määrata kursor, mis kuvatakse elemendi läbimisel järgmiselt:
Ristkarvad
Kohandatud hiirekursorid
Lisaks põhilistele kursoritele saate kasutada kohandatud malle, seades pildifaili aadressi kursori stiilina, nagu alljärgnevas näites:
Kohandatud kursor
Kõik brauserid ei toeta seda funktsiooni ega kõiki failitüüpe. Näiteks ootab Internet Explorer faile laiendiga ".cur" või ".ani". Firefox ei aktsepteeri animeeritud kursoreid (".ani") ja ootab põhikursorit pildist väljas. Parimate tulemuste saamiseks märkige kursorifail (".cur" või ".ani"), pildifail (PNG, JPEG või GIF) ja kursoritüüp kui varukoopia. Järgmises näites kasutatakse esimest valikut animeeritud kursorina, teisel kohal lihtne fail ja viimane valik põhikursor. Brauser proovib kõiki valikuid, kuni leiate endale sobiva:
Kohandatud kursor
Ressursside jaotise avatud kursori raamatukogu pakub vabade hiirekursorite kogusid.
Kursori stiili muutmine Inline Javascriptiga
Kursori CSS-stiili saab muuta JavaScripti abil. Hiire toimingutega on seotud mitu HTML-atribuuti, mida saab kasutada koodide täitmiseks, klõpsates, liigutades või libistades leheküljeelemendi kohal. Mõned näited on:
onmouseover: hiirekursor liigub üle elemendi. onmousedown: hiirenuppu vajutatakse. onmouseup: hiire nupp vabastatakse. onmouseout: hiirekursor väljub elemendist. ondblclick: Kasutaja klõpsab hiirega topeltklõpsuga.
Jaotises "Atribuudid" leiduvad jaotises "Atribuudid" rohkem atribuute, mida saab kasutada Javascriptiga toimingute lisamiseks.
Lisage sündmusele toiming (näiteks "mouseover"), seades atribuudi väärtuseks koodi, mida soovite käivitada. Allolevas näites muutub kursor lingi kohal olevale "help" -le.
Abi
Funktsioonidega mängimine
Mõnikord tahad teha rohkem kui ühe atribuudi. Kirjutades kõik toimingud Javascripti funktsioonis, võite panna kogu koodi oma HTML-dokumendi ülaosas ja rakendada seda mis tahes elemendile, tehes kõne sündmuse atribuudis. Järgmine kood muudab parameetriga "el" möödunud elemendi kursorit:
funktsioon setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), ristmik" GO}
Funktsioon asub dokumendi päise skriptiosas (siltide vahel
ja ) või välises koodifailis, millele viidatakse samas osas. Selle kasutamiseks helistage HTML-märgise sündmuse atribuudist funktsiooniga „see“. Funktsioonile antakse viide hiire sündmusega seotud elemendile ja see muudab kursori stiili. Näiteks kui kursor jätab üle järgmise teksti, muutub kursor järgmiselt:Kursor muutub sellel lingil
Samuti saab muuta põhilist kursorit, mis kuvatakse lehekülje allosas ülemise koha peal. Järgmine funktsioon võimaldab teil kursorit "curtype" parameetris näidatud tüüpi muuta:
funktsioon setMainCursor (curtype) {switch (curtype) {case "laadimine: document.body.style.cursor =" url (working.ani), url (working.png), oodake "; murda GO juhtum "keelatud": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), vaikimisi"; murda GO juhtum "default": vaikimisi: document.body.style.cursor = "url (arrow.cur), vaikimisi" GO}}
Selle kasutamiseks kutsuge HTML-märgise sündmuse atribuudist seda "laadimise", "keelatud" või "vaikimisi". Näiteks, järgmine nupp muudab kursorit "laadimiseks" klõpsamisel:
Javascripti keelel on piiramatu funktsioon. Allolev kood loeb alla ja iga sekund muudab hiirekursori praeguse väärtusega seotud pildiks. Funktsioon "setTimeOut" jätab funktsiooni ühe sekundi enne peatamist ja loenduri uuendamist.
function 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), vaikimisi" GO}}
Kasutage veebilehe funktsiooni abil hiirekursori loendit, kui klõpsate vormi nupul.