Vad är en anpassad markör?

En anpassad markör är en användardefinierad muspekare som ersätter webbläsarens standardpil eller pekarikon. Webbplatser och applikationer använder anpassade markörer för att förstärka varumärken, förbättra uppslukandet i spel eller kreativa upplevelser, eller helt enkelt lägga till en unik visuell touch till ett gränssnitt. Anpassade markörer definieras vanligtvis i CSS med hjälp av egenskapen cursor med ett url()-värde som pekar på en bildfil såsom .cur, .png eller .svg.

Webbläsare stöder flera markörbilformat internt. Formatet .cur är det klassiska Windows-markörbilformatet, .ani lägger till animationsstöd, medan .png och .svg erbjuder moderna, upplösningsoberoende alternativ som fungerar på alla plattformar.

Verktygsbeskrivning

Custom Cursor Tester låter dig ladda upp en markörbil och omedelbar förhandsgranska hur den ser ut och beter sig i webbläsaren. När den är uppladdad ersätter din markör standardpekaren inuti ett dedikerat testområde — en rutmönstrad visningsport med en knapp — så att du kan utvärdera både fri rörelse och hovringsbeteende utan att skriva en enda rad CSS.

Format som stöds

Format Beskrivning
.cur Windows-markörbilformat, brett stödd
.ani Animerad Windows-markör
.png Rasterbild, idealisk för högkvalitativa markörer
.svg Skalbar vektorbild, skarp i vilken storlek som helst
.ico Windows-ikonformat, även användbar som markör

Funktioner

  • Omedelbar förhandsvisning: Markören tillämpas live så snart filen laddas upp — ingen siduppdatering behövs
  • Interaktivt testområde: Rutmönstrad visningsport visar markören över en neutral bakgrund för tydlig synlighet
  • Knapptest: En knapp inuti testområdet låter dig verifiera markörbeteende på interaktiva element
  • Konsekvent markörarv: Knappen ärver den anpassade markören istället för att återgå till webbläsarens standard
  • Endast på klientsidan: Filer läses direkt i webbläsaren och laddas aldrig upp till någon server

Användningsfall

  • Markörsdesigners: Verifiera hur en nyligen skapad .cur- eller .png-markörbil ser ut innan du skickar den
  • Webbutvecklare: Testa snabbt en markörtillgång innan du integrerar den i CSS med egenskapen cursor: url(...)
  • Spel- och kreativa utvecklare: Kontrollera känslan och synligheten för anpassade pekare i interaktiva gränssnittssammanhang

Hur det fungerar

När du laddar upp en fil skapar verktyget en objekt-URL för den med hjälp av webbläsarens URL.createObjectURL()-API och injicerar den som en CSS cursor-stil på testområdet. Detta motsvarar att skriva cursor: url(your-file.cur), auto i ett formatmallar. Reservalternativet auto säkerställer att webbläsaren använder sin standardmarkör om filen inte kan läsas in eller tolkas.

Tips

  • För .png-markörer använder webbläsaren det övre vänstra hörnet (0 0) som hotspot som standard. Om markörbilens aktiva punkt bör vara någon annanstans (t.ex. spetsen på en penna) kan du behöva justera detta i din CSS efter testning.
  • Animerade .ani-markörer spelas automatiskt i webbläsare som stöder dem (främst Chromium-baserade).
  • SVG-markörer måste vara små (vanligtvis under 128×128 px) för att renderas korrekt som markörer i de flesta webbläsare.