Home » Articole » Articole » Calculatoare » Dezvoltarea web » Web design » Web design: Stiluri de cursor al mouse-ului pe site

Web design: Stiluri de cursor al mouse-ului pe site

postat în: Web design 0

MouseDeși aceasta nu este o caracteristică obișnuită în majoritatea site-urilor, poate fi un jucător important dacă intenționați ca site-ul dvs. să se comporte ca și cum ar fi o aplicație.

Putem adăuga reguli de cursor la selectoarele noastre pentru a schimba aspectul cursorului mouse-ului atunci când acea regulă este activă. La fel ca în sistemul dvs. de operare, putem selecta pictograma obișnuită, așteptare (numită și în lucru, ocupat, gândire etc.), inserarea de text, un indicator, un semn de întrebare sau o cruce. În timp ce cele mai multe dintre acestea au puțină utilizare în pagina web obișnuită, sunt utile atunci când produsul dvs. final este mai concentrat asupra aplicațiilor.

Recomand cu tărie folosirea judicioasă a modificărilor cursorului și asigurați-vă că modificările dvs. sunt anulate imediat ce nu mai este necesar (adică schimbați așteptarea/ocupat imediat ce un eveniment este finalizat), deoarece dacă uitați să resetați este posibil ca utilizatorul să creadă că site-ul dvs. (sau sistemul său) este blocat sau a intrat într-un cerc vicios. Lista completă a cursoarelor disponibile este următoarea:

Valoare Descriere
auto (Implicit) lăsați browserul să aleagă
crosshair Cruce, sau simbolul „plus”.
default Cursorul implicit
e-resize Afișează redimensionarea la dreapta (rețineți că toate valorile de redimensionare sunt combinații de busole)
help Pictograma de ajutor (semn de întrebare).
move Elementul poate fi mutat
n-resize Afișează redimensionarea
ne-resize Afișează redimensionarea în sus și la dreapta
nw-resize Afișează redimensionarea în sus și la stânga
pointer Un indicator (săgeată)
progress Simbolul ocupat (ai grijă cu acesta!)
s-resize Afișează redimensionarea în jos
se-resize Afișează redimensionarea în jos și la dreapta
sw-resize Afișează redimensionarea în jos și la stânga
text Linie de text („I” constant sau intermitent)
w-resize Afișează redimensionarea la stânga
wait Arată ocupat, așteptați (fiți atenți cu acesta!)
inherit Moștenește valoarea de la părinte

Tabelul 5 Stiluri de indicator

Stilurile de cursor pot fi aplicate atunci când este declanșat elementul cu un atribut CSS care afectează cursorul. Acest lucru este cauzat de obicei de trecerea cursorului peste obiect sau atunci când utilizatorul inițiază o acțiune, ca reacție la care aplicăm noul stil folosind JavaScript. Rețineți că acțiunile declanșate de utilizator, cum ar fi pictogramele de ocupat, trebuie în mod normal să rămână „ocupat” până când scriptul este terminat. În acest caz, eticheta body ar trebui să primească atributul care afectează cursorul, astfel încât să fie în continuare ocupat, chiar dacă utilizatorul mută mouse-ul de pe butonul sau alt declanșator pe care l-a folosit.

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Ghid WordPress pentru dezvoltatori
Ghid WordPress pentru dezvoltatori

Resursa esențială care te va ghida pas cu pas în lumea complexă a platformei WordPress.

Nu a fost votat 19.11 lei Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Ghid WordPress pentru începători
Ghid WordPress pentru începători

Descoperă arta gestionării site-urilor web cu WordPress!

Nu a fost votat 14.32 lei26.24 lei Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Proiectarea, dezvoltarea şi întreţinerea siturilor web

Ghidul complet pentru proiectarea, dezvoltarea și întreținerea siturilor web, o resursă indispensabilă

Nu a fost votat 14.32 lei57.32 lei Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *