Saturs
- Peles kursori
- Pielāgoti peles kursori
- Kursora stila maiņa ar Inline Javascript
- Atskaņošana ar funkcijām
Mainot peles kursoru, ir vienkāršs veids, kā pievienot tīmekļa lapai īpašus efektus. Tas var uzlabot lietojamību, nodrošinot lietotājiem papildu vizuālos palīglīdzekļus, jo īpaši sarežģītākās lapās, piemēram, spēlēs un interaktīvās kartes. Jūs varat izmantot Javascript, lai mainītu kursora stilu atbilstoši datumam, laika apstākļiem un visam citam. Izmantojot Javascript, HTML un CSS, lai izveidotu dinamiskas tīmekļa lapas, tiek dēvēts par DHTML (dinamisko HTML).
Peles kursori
Ir vairāki standarta peles kursori, kurus var izmantot, mainot elementa vai lapas korpusa stilu. Nosaukumi ir noklusējuma, krustveida, roku, pārvietošanas, teksta, gaidīšanas un palīdzības. Sīkāku informāciju par to skatiet sadaļā "Resursi" saite "CSS kursora īpašums". Izmantojiet CSS, lai definētu kursoru, kas tiks parādīts, kad pāriet uz elementu šādi:
Krusta mati
Pielāgoti peles kursori
Papildus galvenajiem kursoriem varat izmantot pielāgotas veidnes, iestatot attēla faila adresi kā kursora stilu, kā norādīts šajā piemērā:
Pielāgots kursors
Ne visas pārlūkprogrammas atbalsta šo funkciju vai visus failu tipus. Piemēram, Internet Explorer sagaida failus ar paplašinājumu ".cur" vai ".ani". Firefox nepieņem animētus kursorus (".ani") un sagaida pamata kursoru ārpus attēla. Lai iegūtu vislabākos rezultātus, norādiet kursora failu (".cur" vai ".ani"), attēla failu (PNG, JPEG vai GIF) un pamata kursora tipu kā rezerves kopiju. Nākamais piemērs izmanto animētu kursoru kā pirmo izvēli, vienkāršu failu otrajā vietā un pamata kursoru kā pēdējo opciju. Pārlūkprogramma izmēģinās visas opcijas, līdz atradīsiet to, ko varat izmantot:
Pielāgots kursors
Atvērto kursoru bibliotēka resursu sadaļā piedāvā bezmaksas peles kursoru kolekcijas.
Kursora stila maiņa ar Inline Javascript
Varat mainīt kursora CSS stilu, izmantojot Javascript. Ir vairāki HTML atribūti, kas saistīti ar peles darbībām, kuras var izmantot, lai izpildītu kodu, noklikšķinot, pārvietojot vai novietojot virs lapas elementa. Daži piemēri ir:
onmouseover: peles rādītājs pāriet uz elementu. onmousedown: tiek nospiesta peles poga. onmouseup: tiek atbrīvota peles poga. onmouseout: peles rādītājs iziet no elementa. ondblclick: lietotājs veic dubultklikšķi uz peli.
Sadaļas "Atribūti" sadaļā "Atribūti" jūs atradīsiet vairāk atribūtu, ko varat izmantot, lai pievienotu darbības ar Javascript.
Pievienojiet notikumam notikumu (piemēram, "mouseover"), nosakot kodu, kuru vēlaties rādīt kā atribūta vērtību. Tālāk redzamajā piemērā kursors mainīsies uz "palīdzība", virzot virs saites.
Palīdzība
Atskaņošana ar funkcijām
Dažreiz jūs vēlaties darīt vairāk nekā vienu atribūtu. Rakstot visas darbības Javascript funkcijā, varat ievietot visu kodu HTML dokumenta augšpusē un piemērot to jebkuram elementam, veicot zvanu notikuma atribūtā. Nākamais kods maina kursoru uz elementa, kas nodots kā parametrs "el":
funkcija setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), krustojums" GO}
Funkcija atrodas dokumenta galvenes skriptu sadaļā (starp tagiem)
un ) vai ārējā koda failā, kas minēts tajā pašā daļā. Lai to izmantotu, izsauciet funkciju ar atslēgvārdu "šī" no notikuma atribūta HTML tagā. Funkcija saņems atsauci uz elementu, kas saistīts ar peles notikumu, un mainīs kursora stilu. Piemēram, ja rādītājs izlaiž šādu tekstu, kursora izmaiņas:Kursors mainīsies šajā saitē
Varat arī mainīt galveno kursoru, kas tiks parādīts, atrodoties lapas apakšdaļā. Nākamā funkcija ļaus jums mainīt kursoru uz parametru "curtype" norādītais tips:
funkcija setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), pagaidiet"; pārtraukums GO gadījums "aizliegts": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), noklusējums"; pārtraukums GO gadījums "noklusējums": noklusējums: document.body.style.cursor = "url (arrow.cur), noklusējums" GO}}
Lai to izmantotu, HTML tagā no notikuma atribūta sauciet to par "ielādēšanu", "aizliegtu" vai "noklusējumu". Piemēram, šī poga mainīs kursoru uz "ielādēšanu", kad noklikšķinās:
Javascript valodai ir neierobežota funkcionalitāte. Turpmāk norādītais kods tiek skaitīts uz leju, un katru sekundi peles kursoru mainīs uz pašreizējo vērtību. Funkcija "setTimeOut" atstās funkciju uz vienu sekundi pirms atsaukšanas un skaitītāja atjaunināšanas.
funkcija doCountdownCursor (skaits) {document.body.style.cursor = "url (" + skaits + ".ani), url (" + skaits + ".png) {setTimeout ("doCountdownCursor (" + skaits + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), noklusējums" GO}}
Tīmekļa lapā izmantojiet funkciju, lai parādītu peles kursora skaitli, kad noklikšķināt uz veidlapas pogas.