Wat is een aangepaste cursor?

Een aangepaste cursor is een door de gebruiker gedefinieerde muisaanwijzer die de standaard pijl of aanwijzerpictogram van de browser vervangt. Websites en applicaties gebruiken aangepaste cursors om branding te versterken, onderdompeling in games of creatieve ervaringen te verbeteren, of eenvoudigweg een uniek visueel tintje aan een interface toe te voegen. Aangepaste cursors worden doorgaans in CSS gedefinieerd met behulp van de cursor-eigenschap met een url()-waarde die naar een afbeeldingsbestand verwijst, zoals .cur, .png of .svg.

Webbrowsers ondersteunen natively verschillende cursor-bestandsindelingen. Het .cur-formaat is het klassieke Windows cursor-formaat, .ani voegt animatieondersteuning toe, terwijl .png en .svg moderne, resolutie-onafhankelijke alternatieven bieden die op alle platforms werken.

Hulpprogrammabeschrijving

Met de Custom Cursor Tester kunt u elk cursor-bestand uploaden en direct bekijken hoe het eruitziet en zich gedraagt in de browser. Na het uploaden vervangt uw cursor de standaard aanwijzer in een speciaal testgebied — een viewport met een ruitpatroon en een knop — zodat u zowel vrije beweging als hover-gedrag kunt evalueren zonder een enkele regel CSS te schrijven.

Ondersteunde indelingen

Indeling Beschrijving
.cur Windows cursor-formaat, veel ondersteund
.ani Geanimeerde Windows cursor
.png Rasterafbeelding, ideaal voor cursors van hoge kwaliteit
.svg Schaalbare vectorafbeelding, scherp in elke grootte
.ico Windows pictogramformaat, ook bruikbaar als cursor

Functies

  • Instant preview: Cursor wordt live toegepast zodra het bestand is geüpload — geen pagina-herlaad nodig
  • Interactief testgebied: Viewport met ruitpatroon toont de cursor over een neutrale achtergrond voor duidelijke zichtbaarheid
  • Knop testdoel: Een knop in het testgebied laat u het cursor-gedrag op interactieve elementen verifiëren
  • Consistente cursor-overerving: De knop erft de aangepaste cursor over in plaats van terug te vallen op de browserstandaard
  • Alleen client-side: Bestanden worden rechtstreeks in de browser gelezen en nooit naar een server geüpload

Gebruiksscenario's

  • Cursor-ontwerpers: Controleer hoe een nieuw gemaakte .cur- of .png-cursor-bestand eruitziet voordat u het verstuurt
  • Webontwikkelaars: Test snel een cursor-asset voordat u deze in CSS integreert met de cursor: url(...)-eigenschap
  • Game- en creatieve ontwikkelaars: Controleer het gevoel en de zichtbaarheid van aangepaste aanwijzers in interactieve UI-contexten

Hoe het werkt

Wanneer u een bestand uploadt, maakt het hulpprogramma een object-URL voor het bestand met behulp van de URL.createObjectURL()-API van de browser en injecteert het als een CSS cursor-stijl op het testgebied. Dit is gelijk aan het schrijven van cursor: url(your-file.cur), auto in een stylesheet. De fallback auto zorgt ervoor dat de browser zijn standaard cursor gebruikt als het bestand niet kan worden geladen of geparseerd.

Tips

  • Voor .png-cursors gebruikt de browser standaard de linkerbovenhoek (0 0) als het hotspot. Als het actieve punt van uw cursor elders moet zijn (bijv. de punt van een potlood), moet u dit mogelijk aanpassen in uw CSS na het testen.
  • Geanimeerde .ani-cursors worden automatisch afgespeeld in browsers die deze ondersteunen (vooral op Chromium gebaseerde).
  • SVG-cursors moeten klein zijn (meestal onder 128×128 px) om correct als cursors in de meeste browsers weer te geven.