Vergrootglas als custom cursor bij afbeeldingen

Bij afbeeldingen op mijn site die nog een vergroting hebben, had ik altijd al een vergrootglas-icoontje in de rechteronderhoek staan. Nu heb ik er een zelfgemaakte cursor aan toegevoegd: als je over zo’n afbeelding heengaat, verandert de cursor in een vergrootglas.

Dit maakt de gebruiker beter duidelijk wat hij kan verwachten dan het standaard vingertje. Met alleen wat css is zo’n custom cursor supersimpel. Een voorbeeld zie je hieronder:

Ik heb deze toepassing overigens niet zelf bedacht: ik zag het voor het eerst op Wishlistr, waar Highslide wordt gebruikt voor het tonen van vergrotingen.

Hoe werkt het?

Alle afbeeldingen die een vergroting hebben, staan bij mij in een <a>-element met class hasBigImage. Dit is dan alle css die nodig is:

a.hasBigImage img {
    cursor: url(/css/images/cursor_zoom_in.cur), pointer;
}

Naast keywords kun je voor de css-property cursor dus ook een url naar een bestand opgeven. Voor browsers die dit niet ondersteunen, moet je daarnaast een alternatief aanbieden; voor links is dat pointer. Bij het opgeven van het pad naar de cursor zit een addertje onder het gras: Internet Explorer (zucht) interpreteert het pad naar de cursor relatief ten opzichte van de url van de pagina, in plaats van relatief ten opzichte van de stylesheet. Geef daarom een absoluut pad op. Verder is uiteraard nog een soortgelijk stukje code nodig voor het uitzoomen.

Zelf cursor bestanden maken

De cursor-bestandjes die ik zelf gebruik zijn cursor_zoom_in.cur en cursor_zoom_out.cur. Maak je liever je eigen cursors in Photoshop, dan heb je een cursor-bestandsformaat plugin nodig om cursor-bestanden te kunnen openen en opslaan. Zorg er bij het maken wel voor dat je voor de transparante delen een alpha-channel aanmaakt.

Verbetering of niet?

Zelf ben ik al jaren gewend aan het zien van vergrootglas-cursors in programma’s als Photoshop, Flash en Illustrator, en ik gok dat ook andere gebruikers dit wel begrijpen. Is dit een verbetering, of is het beter de cursor gewoon een vingertje te laten? Laat me weten wat je ervan vindt.