Hva er en egendefinert markør?

En egendefinert markør er en brukerdefinert musepeker som erstatter nettleserens standard pil eller pekerikon. Nettsteder og applikasjoner bruker egendefinerte markører for å styrke merkevaren, forbedre oppsluktheten i spill eller kreative opplevelser, eller ganske enkelt legge til et unikt visuelt preg på et grensesnitt. Egendefinerte markører defineres vanligvis i CSS ved hjelp av cursor-egenskapen med en url()-verdi som peker til en bildefil som .cur, .png eller .svg.

Nettlesere støtter flere markørfilformater innebygd. .cur-formatet er det klassiske Windows-markørformatet, .ani legger til animasjonsstøtte, mens .png og .svg tilbyr moderne, oppløsningsuavhengige alternativer som fungerer på alle plattformer.

Verktøybeskrivelse

Custom Cursor Tester lar deg laste opp en hvilken som helst markørfil og få en øyeblikkelig forhåndsvisning av hvordan den ser ut og oppfører seg i nettleseren. Når den er lastet opp, erstatter markøren standardpekerens innenfor et dedikert testområde — et rutete visningsvindu med en knapp — slik at du kan evaluere både fri bevegelse og sveveatferd uten å skrive en eneste linje CSS.

Støttede formater

Format Beskrivelse
.cur Windows-markørformat, bredt støttet
.ani Animert Windows-markør
.png Rasterbilde, ideelt for høykvalitetsmarkører
.svg Skalerbar vektorbilde, skarp i alle størrelser
.ico Windows-ikonformat, også brukbar som markør

Funksjoner

  • Øyeblikkelig forhåndsvisning: Markøren brukes direkte så snart filen er lastet opp — ingen sideopplasting nødvendig
  • Interaktivt testområde: Rutete visningsvindu viser markøren over en nøytral bakgrunn for klar synlighet
  • Knappetestmål: En knapp inne i testområdet lar deg verifisere markøratferd på interaktive elementer
  • Konsistent markørarv: Knappen arver den egendefinerte markøren i stedet for å gå tilbake til nettleserens standard
  • Kun klientsiden: Filer leses direkte i nettleseren og lastes aldri opp til noen server

Brukstilfeller

  • Markørdesignere: Verifiser hvordan en nyopprettet .cur- eller .png-markørfil ser ut før du leverer den
  • Nettutvikling: Test raskt en markørmiddel før du integrerer den i CSS med cursor: url(...)-egenskapen
  • Spill- og kreative utviklere: Sjekk følelsen og synligheten av egendefinerte pekere i interaktive UI-sammenhenger

Hvordan det fungerer

Når du laster opp en fil, oppretter verktøyet en objekt-URL for den ved hjelp av nettleserens URL.createObjectURL()-API og injiserer den som en CSS cursor-stil på testområdet. Dette tilsvarer å skrive cursor: url(your-file.cur), auto i et stilark. Reservealternativet auto sikrer at nettleseren bruker sin standardmarkør hvis filen ikke kan lastes inn eller tolkes.

Tips

  • For .png-markører bruker nettleseren øvre venstre hjørne (0 0) som hotspot som standard. Hvis markørens aktive punkt skal være et annet sted (f.eks. spissen av en blyant), må du kanskje justere dette i CSS etter testing.
  • Animerte .ani-markører spilles automatisk av i nettlesere som støtter dem (primært Chromium-baserte).
  • SVG-markører må være små (vanligvis under 128×128 px) for å gjengi seg riktig som markører i de fleste nettlesere.