Of je nu CSS of Javascript gebruikt, een achtergrondafbeelding bij een link zal meestal dan pas geladen worden als ze nodig is , bij het hoveren en dit kan soms een vertraging opleveren, en JavaScript preloaden is tegenwoordig geen optie meer.
De oplossing is één afbeelding te gebruiken die alle “states” reeds bevat, en bij hover verander je de afbeelding van plaats, dus geen vertraging meer.

Deze methode werkt door een lege <span> over het parent element te plaatsen en daarin de afbeelding als achtergrondafbeelding te zetten.
Nadeel is natuurlijk de lege <span>.

Op deze methode kwam Mike Rundle door een ongeloofelijke abnormale groote text-indent waarde mee te geven zodat het zelfs op de grootste monitoren ter wereld onmogelijk is om de tekst weer tegeven.

Methode samen ontwikkeld door Seamus Leahy & Stuart Langridge, die zich vooral richt op het placeren van de afbeelding, dus er is geen extra tag meer nodig zoals bij FIR

Geen extra <span> nodig

Genoemd naar Todd Fahner die deze techniek uitgevonden heeft om tekst te vervangen met een afbeelding door gebruik te maken van de background (of background-image) mogelijkheid in CSS.

De CSS voor deze methode heeft de extra <span> tag nodig