Ritkán szoktunk UX elemként tekinteni az egérkurzorra, pedig nem nehéz belátni, hogy az egérrel vezérelt felhasználói interfészeknek talán a legfontosabb objektuma: lényegében a felhasználó, vagy legalábbis a felhasználó mutatóujjának virtuális avatárja. Ugyanakkor persze nem is véletlen, hogy nem szokott eszünkbe jutni, hogy mi van vele, ugyanis a kurzor lényege, hogy technikailag “láthatatlan” maradjon, ne nyomakodjon az előtérbe és terelje el a figyelmet a valódi tartalomról és designról. 

Mindennek ellenére létezik egy olyan vonulat a web- és UX designban, ahol nem számít tabunak a kurzor megváltoztatása: leginkább olyan designok esetén érdemes fontolóra venni ezt a trükköt, ahol egy ilyen látványos (mondhatni hivalkodó) effektussal ki akarjuk billenteni a felhasználót a megszokott kerékvágásból, és érzékeltetni akarjuk vele, hogy ez a weboldal egy kicsit ki akar lógni a sorból. A legtöbb esetben ezek a megoldások afféle különcködésnek, jópofáskodásnak számítanak, de komolyabb koncepciók köré felépített oldalak esetében is sokat hozzátehetnek az üzenethez. 

Mivel a kurzor babrálása csak nagyon indokolt esetben, felelősségünk teljes tudatában tanácsos, a ritkábban emlegetett CSS tulajdonságok közé tartozik a cursor:, amivel gyermeki egyszerűségekkel állíthatjuk át az egérmutató viselkedését. Természetesen a kurzorunknak magának már van egy szekérderéknyi saját állapota, ezeket a mindennapos interakciók során szokta felvenni, de mi is előidézhetjük őket, ahogyan azt a W3 Schools példakódjából, vagy a lenti Codepenből is láthatjuk.

Na de beszéljünk a lényegről: hogyan tudjuk lecserélni a nyilacskát? Nagyon egyszerűen, a cursor: után megadhatunk egy vagy több URL-t, ami a behívandó kép hiperlinkjét tartalmazza. Ha az első nem működik, beugrik a második és így tovább, a sor végére pedig mindig a helyzetnek megfelelő standard egérfunkciót kell megjelölni, hogy végső esetben a böngésző a normál mutatót használhassa (alaphelyzethez auto).

cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;

A személyre szabott kurzorok fontos tulajdonsága, hogy megszabhassuk, hová esik a célzópont (hotspot), ezt az URL után az X és Y koordináta megadásával tudjuk beállítani.

.bar  {
  cursor: pointer;
  cursor: url(cursor2.png) 2 2, pointer;
}

Lényegében ennyi a mutatvány, persze, ha ennél trükkösebb megoldásokra vágysz, a Javascript segítségével nagyon cifra, animált kurzorokat is varázsolhatsz, de ez egy másik történet. 

A cikkben szereplő példákat a Mozilla fejlesztői oldaláról, az MDN-ről vettem kölcsön. Címkép: Lid Games.