Att ändra på muspekaren genom CSS är nog inget man nyttjar varje dag, men det kan vara bra att känna till det.
Genom CSS kan man byta utseendet på muspekaren, dels till muspekarens färdigdefinierade varianter samt till extern bild.
Vi kan gå igenom de färdigdefinierade varianterna först. Gå över nedanstående länkar med musen så ska muspekarens utseende ändras. Nedanstående exempel är testat i senaste Firefox och Internet Explorer.
- Muspekare: crosshair
- Muspekare: hand
- Muspekare: move
- Muspekare: text
- Muspekare: wait
- Muspekare: help
- Muspekare: n-resize
- Muspekare: ne-resize
- Muspekare: se-resize
- Muspekare: e-resize
- Muspekare: s-resize
- Muspekare: sw-resize
- Muspekare: w-resize
- Muspekare: nw-resize
- Muspekare: progress
- Muspekare: not allowed
- Muspekare: no drop
- Muspekare: vertical text
- Muspekare: all scroll
- Muspekare: col resize
- Muspekare: row resize
Hur fungerar egenvalda muspekare i CSS då?
För exempelvis första exemplet ’crosshair’ så ser koden ut så här:
<a style="cursor:crosshair, default" href="#">Muspekare: crosshair</a>
Inget konstigt med det, en helt vanlig CSS definition inline i A taggen. Man kan naturligtvis lägga detta separat i extern stilmall. Man kan även lägga ”cursor: crosshair” i body elementet vilket innebär att muspekaren presenteras som ett sikte i hela sajten –detta vill man naturligtvis inte, se det bara som ett exempel, återkommer till detta avslutningsvis i denna artikel.
För att få andra musikoner än ”crosshair” i exemplet ovan kan man enkelt byta ut ordet mot annat alternativ från länklistan ovan.
Betydligt mer spännande än ovanstående exempel är att använda sig av en extern fil som substitut för muspekare. Detta gör man genom följande syntax i CSS:
cursor: url(’cursor.cur’);
,där ’cursor.cur’ pekar mot muspekarikonen vilket innebär att filen kan placeras på en annan domän om man bara har tillgång til. Lägg märke till att ”, default” är tillagt i deklarationen. Detta eftersom muspekaren inte kommer synas i Firefox annars. Firefox förväntar sig få en ikon specificerad som standardikon annars går den tillbaka till den vanliga muspekaren.
Observera nu att muspekaren måste vara i .cur eller .ani filformat, GIF eller annat bildformat fungerar inte.
Punkt cur är Windows filformat för muspekare vilket betyder att det finns ett stort urval muspekare man kan använda sig av på webben, det finns också många program man kan använda om man vill göra sin egen muspekare.
Se nedan för ett exempel med en .cur fil. När man för muspekaren över nedanstående bild ändrar pekaren form och färg (uppenbarligen funkar detta lite halvbra i Internet Explorer 8, men det finns nog någon fix till detta).
När är det då läge att använda ovanstående CSS tekniker?
Det är ingen hemlighet att användare surfar mest effektivt när de kommer till bekanta miljöer. Nielsen har en viss poäng i att länkar egentligen alltid borde vara blåa för det är den färgen besökare per definition uppfattar att en HTML-länk ska vara, det kan man bland annat se tydligt om man anpassar reklam på en sida till att ha blå färg på länktext jämfört med annan färg.
Det är väldigt lätt att göra en besökare förvillad om man bestämmer sig för att ändra utseendet på muspekaren så det är för det mesta inom speciella tillämplingar som det kan vara aktuellt att modifiera muspekare genom CSS. Exempelvis om man gör en sajt där besökare kan dra i boxar för att göra dem större och mindre, då kan det vara bra att definiera vissa hörn på boxen att visa en viss slags muspekare så användare får feedback om att det går att klicka samt dra på boxen.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.