tanketorsken.dk/forbedring-af-image-replacement-teknik/

28.August 2008 16:50Forbedring af image-replacement teknik

Når jeg i css skal erstatte noget HTML-tekst med et billede (sker typisk i en menu, eller et logo) bruger jeg Phark image replacement:

<h1><a href="#">Firmanavn</a></h1>

// CSS
h1 {
  width: 120px;
  height: 45px;
  text-indent: -9000px;
}

h1 a:link, h1 a:visited {
  display: block;
  width: 120px;
  height: 45px;
  background: transparent url(logo.png) 0 0 no-repeat;
}

h1 a:hover, h1 a:active {
  background-position: -45px 0;
}

Det er en utrolig nem måde at lave image replacement på og jeg har altid været utrolig tilfreds med metoden. Lige med undtagelse af en enkelt detalje. Når man klikke på et link i Firfox kommer der en stiplet ramme rundt om linket. Men når man i Phark-metoden bruger en stor negativ tekstindrykning, kommer den stiplede linje til at gå hele vejen til venstre side af browser vinduet, hvilket altid har generet mig en god portion. Alligevel er jeg blevet ved med at bruge Phark-metoden da der er negative ting ved alle de alternativer jeg har læst om (som oftest et ekstra overflødigt span-element).
Egentlig havde jeg lært at leve med den grimme stiplede ramme der går hele vejen ud til venstrekanten af browservinduet, men i dag faldt jeg over en løsning, der lader mig bruge Phark-metoden og som samtidig undgår problemet med den stiplede linje. Og det var selvfølgelig tåbelig simpelt. Man skal blot tilføje “overflow:hidden” til link-elementet og så er problemet løst! Jøsses hvor ville jeg gerne have vidst det for halvandet år siden.