Niektoré prvky webových stránok menia svoj vzhľad pri vznášaní sa myšou - je to pre ne predvolene predpísané nastavením jazyka HTML (HyperText Markup Language - „Hypertext Markup Language“). Tento jazyk má nástroje, ktoré vám umožňujú meniť rovnaké nastavenia pre ďalšie prvky stránky. Ak je to potrebné, môžete na tento účel použiť CSS (kaskádové štýly) aj skriptovací jazyk JavaScript na strane klienta.
Inštrukcie
Krok 1
Pomocou atribútu štýl môžete nastaviť premennú kurzora v značke objektu webovej stránky, ktorá vás zaujíma. Napríklad HTML kód vstupného textového poľa, ktoré dáva prehliadaču návštevníka pokyn, aby zmenil vzhľad kurzora rovnakým spôsobom, ako keď umiestnite kurzor myši na odkaz, možno napísať takto:
Krok 2
Vyberte požadovaný vzhľad kurzora zo zoznamu platných hodnôt pre parameter kurzora. V príklade zobrazenom v predchádzajúcom kroku sa použije hodnota ukazovateľa - hodnota ruky má úplne rovnaký účinok. Okrem týchto dvoch hodnôt sú k dispozícii nasledujúce možnosti vzhľadu kurzora: nitkový kríž, e-zmena veľkosti, pomoc, presun, n-zmena veľkosti, zmena veľkosti, nw-zmena veľkosti, pokrok, s-zmena veľkosti, zmena veľkosti, sw-resize, text, w -resize, počkaj. Napríklad na to, aby vo vyššie uvedenej ukážke kódu vyzeral kurzor ako dvojhlavá šípka zľava hore dole vpravo, použite namiesto ukazovateľa nw-resize:
Písmená pred hodnotou pre zmenu veľkosti pomáhajú určiť, do ktorých smerov je šípka smerovaná touto hodnotou - rovnako ako na kompase zodpovedajú označeniam svetových strán. Napríklad nw znamená sever-západ (severozápad), s pre juh (juh) atď.
Krok 3
Ak ste nahrali svoj vlastný obrázok kurzora v pôvodnom formáte cur, použite namiesto vopred určených hodnôt adresu URL súboru. Použite nasledujúcu syntax:
<input style = "cursor: url (https://someSite.ru/someCursor.cur) "/>
Ak je súbor umiestnený v rovnakom priečinku so stránkou alebo v podpriečinku, môžete namiesto absolútnej adresy určiť relatívnu.
Krok 4
Atribút onmouseover použite, ak chcete zmeniť vzhľad kurzora pomocou JavaScriptu. Napríklad:
Tento kód bude fungovať presne ako ukážka v druhom kroku.
