Conţinut
- Cursoare de bază pentru mouse
- Cursoare personalizate pentru mouse
- Modificarea stilului cursorului cu Javascript Inline
- Redarea cu funcții
Schimbarea cursorului mouse-ului este o modalitate simplă de a adăuga efecte speciale pe pagina dvs. Web. Acest lucru poate îmbunătăți gradul de utilizare prin oferirea de asistență vizuală suplimentară utilizatorilor, în special pe pagini mai complexe, cum ar fi jocuri și hărți interactive. Puteți utiliza Javascript pentru a schimba stilul cursorului în funcție de dată, vreme și orice altceva. Tehnica de a utiliza Javascript, HTML și CSS pentru a crea pagini web dinamice este cunoscută sub numele de DHTML (Dynamic HTML).
Cursoare de bază pentru mouse
Există mai mulți cursori standard de mouse care pot fi utilizați prin modificarea stilului unui element sau a corpului paginii. Numele sunt implicite, cu cruce, mână, mutați, text, așteptați și ajutați. Vedeți linkul "CSS Cursor Property" din secțiunea "Resurse" pentru mai multe detalii despre ele. Utilizați CSS pentru a defini cursorul care va fi afișat atunci când treceți peste un element după cum urmează:
Cross-păr
Cursoare personalizate pentru mouse
În plus față de cursorii de bază, puteți utiliza șabloane personalizate prin setarea adresei unui fișier imagine ca stil de cursor, ca în exemplul următor:
Cursor personalizat
Nu toate browserele acceptă această caracteristică sau toate tipurile de fișiere. De exemplu, Internet Explorer se așteaptă la fișiere cu extensie ".cur" sau ".ani". Firefox nu acceptă cursoare animate (".ani") și așteaptă un cursor de bază dincolo de imagine. Pentru cele mai bune rezultate, indicați un fișier cursor (".cur" sau ".ani"), un fișier imagine (PNG, JPEG sau GIF) și un tip de cursor de bază ca rezervă. Următorul exemplu folosește un cursor animat ca prima alegere, un fișier simplu în al doilea rând și cursorul de bază ca ultima opțiune. Browserul va încerca toate opțiunile până când veți găsi unul pe care îl puteți utiliza:
Cursor personalizat
Biblioteca Cursor Deschis în secțiunea Resurse oferă colecții de cursoare gratuite de mouse.
Modificarea stilului cursorului cu Javascript Inline
Puteți schimba stilul CSS al cursorului utilizând Javascript. Există mai multe atribute HTML legate de acțiunile mouse-ului care pot fi folosite pentru a executa un cod făcând clic, mutați sau plasând cursorul peste un element de pagină. Câteva exemple sunt:
onmouseover: cursorul mouse-ului trece peste un element. onmousedown: se apasă butonul mouse-ului. onmouseup: butonul mouse-ului este eliberat. onmouseout: indicatorul mouse-ului părăsește elementul. ondblclick: Utilizatorul face dublu clic pe mouse.
În secțiunea "Atribute" din secțiunea "Atribute" veți găsi mai multe atribute pe care le puteți utiliza pentru a adăuga acțiuni cu Javascript.
Adăugați o acțiune la un eveniment (de exemplu, "mouseover"), setând codul pe care doriți să-l executați ca valoare a atributului. În exemplul de mai jos, cursorul se va schimba în "ajutor", făcând cursorul peste link.
Ajutor
Redarea cu funcții
Uneori, veți dori să faceți mai mult de un atribut. Prin scrierea tuturor acțiunilor într-o funcție Javascript, puteți pune întregul cod în partea de sus a documentului HTML și îl puteți aplica oricăror elemente făcând un apel în atributul eveniment. Următorul cod modifică cursorul pe elementul trecut ca parametru "el":
funcția setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO}
Funcția va fi localizată în secțiunea de script a antetului documentului (între etichete
și ) sau într-un fișier de cod extern menționat în aceeași parte. Pentru ao utiliza, apelați funcția cu cuvântul cheie "this" dintr-un atribut de eveniment într-o etichetă HTML. Funcția va primi o referință la elementul asociat cu evenimentul mouse-ului și va schimba stilul cursorului. De exemplu, dacă indicatorul trece peste textul următor, cursorul se modifică:Cursorul se va schimba pe acest link
De asemenea, puteți schimba cursorul principal care va fi afișat când treceți în partea de jos a paginii. Următoarea funcție vă va permite să schimbați cursorul la tipul indicat în parametrul "curtype":
funcția setMainCursor (curtype) {comutator (curtype) {caz "încărcare": document.body.style.cursor = "url (working.ani), url (working.png), wait"; pauză caz GO "interzis": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), implicit"; pauză GO caz "implicit": implicit: document.body.style.cursor = "url (arrow.cur), implicit" GO "}
Pentru ao folosi, numiți "încărcare", "interzis" sau "implicit" dintr-un atribut de eveniment într-o etichetă HTML. De exemplu, următorul buton va schimba cursorul la "încărcare" atunci când se dă clic pe el:
Limba Javascript are o funcționalitate nelimitată. Codul de mai jos va conta și fiecare secundă va schimba cursorul mouse-ului la o imagine asociată cu valoarea curentă. Funcția "setTimeOut" va lăsa funcția suspendată pentru o secundă înainte de a fi rechemată și actualizarea contorului.
funcția doCountdownCursor (număr) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} altfel {document.body.style.cursor = "url (arrow.cur), implicit GO"}
Pe pagina web, utilizați funcția pentru a afișa contorul pe cursorul mouse-ului când faceți clic pe un buton de pe un formular.