Mikä on mukautettu osoitin?

Mukautettu osoitin on käyttäjän määrittämä hiiren osoitin, joka korvaa selaimen oletusarvoisesti nuolen tai osoittimen kuvakkeen. Verkkosivustot ja sovellukset käyttävät mukautettuja osoittimia brändin vahvistamiseen, pelaamiskokemusten tai luovien sovellusten parantamiseen tai yksinkertaisesti käyttöliittymän visuaalisen ilmeen parantamiseen. Mukautetut osoittimet määritetään tyypillisesti CSS:ssä käyttämällä cursor-ominaisuutta ja url()-arvoa, joka osoittaa kuvatiedostoon, kuten .cur, .png tai .svg.

Verkkoselaimet tukevat natiivisti useita osoittimen tiedostomuotoja. .cur-muoto on klassinen Windows-osoitinmuoto, .ani lisää animaatiotuen, kun taas .png ja .svg tarjoavat moderneja, resoluutiosta riippumattomia vaihtoehtoja, jotka toimivat kaikilla alustoilla.

Työkalun kuvaus

Custom Cursor Tester -työkalu mahdollistaa minkä tahansa osoitintiedoston lataamisen ja välittömän esikatselun siitä, miltä se näyttää ja miten se käyttäytyy selaimessa. Lataamisen jälkeen osoittimesi korvaa oletusarvoisesti osoittimen omistetulla testialueella — ruudullisella näkymällä, jossa on painike — jotta voit arvioida sekä vapaan alueen liikettä että hover-käyttäytymistä ilman yhden CSS-rivin kirjoittamista.

Tuetut muodot

Muoto Kuvaus
.cur Windows-osoitinmuoto, laajalti tuettu
.ani Animoitu Windows-osoitin
.png Rasterigrafiikka, ihanteellinen laadukkaille osoittimille
.svg Skaalautuva vektorigrafiikka, terävä missä tahansa koossa
.ico Windows-kuvakkemuoto, käytettävissä myös osoittimena

Ominaisuudet

  • Välitön esikatselu: Osoitin otetaan käyttöön heti tiedoston lataamisen jälkeen — sivun uudelleenlatausta ei tarvita
  • Interaktiivinen testialue: Ruudullinen näkymä näyttää osoittimen neutraalin taustan päällä selkeää näkyvyyttä varten
  • Painikkeen testikohde: Testialueen sisällä oleva painike mahdollistaa osoittimen käyttäytymisen tarkistamisen interaktiivisissa elementeissä
  • Johdonmukainen osoittimen periminen: Painike perii mukautetun osoittimen sen sijaan, että se palautuisi selaimen oletusarvoon
  • Vain asiakaspuoli: Tiedostot luetaan suoraan selaimessa, eikä niitä koskaan ladata mihinkään palvelimeen

Käyttötapaukset

  • Osoittimen suunnittelijat: Tarkista, miltä äskettäin luotu .cur- tai .png-osoitintiedosto näyttää ennen sen toimittamista
  • Verkkokehittäjät: Testaa nopeasti osoitinresurssia ennen sen integroimista CSS:ään cursor: url(...) -ominaisuudella
  • Peli- ja luovakehittäjät: Tarkista mukautettujen osoittimien tuntu ja näkyvyys interaktiivisissa käyttöliittymäkonteksteissa

Miten se toimii

Kun lataat tiedoston, työkalu luo sille objekti-URL:n käyttämällä selaimen URL.createObjectURL() API:a ja injektoi sen CSS cursor -tyyliin testialueella. Tämä vastaa cursor: url(your-file.cur), auto kirjoittamista tyylisivulle. Varasuunnitelma auto varmistaa, että selain käyttää oletusarvoisesti osoitintaan, jos tiedostoa ei voida ladata tai jäsentää.

Vinkkejä

  • .png-osoittimissa selain käyttää oletusarvoisesti vasemmasta yläkulmasta (0 0) hotspotina. Jos osoittimesi aktiivinen piste pitäisi olla muualla (esim. kynän kärki), saatat joutua säätämään tämän CSS:ssä testaamisen jälkeen.
  • Animoidut .ani-osoittimet toistetaan automaattisesti selaimissa, jotka tukevat niitä (ensisijaisesti Chromium-pohjaiset).
  • SVG-osoittimien on oltava pieniä (tyypillisesti alle 128×128 px) renderöityäkseen oikein osoittimina useimmissa selaimissa.