“Image Replacement”

“Image Replacement” betyder noget i retning af billed-erstatning. Det er betegnelsen for en teknik, der tillader dig at bruge grafiske tekstelementer på din webside, og alligevel sørge for at teksten er tilgængelig for skærmlæsere og søgerobotter.

I min artikel Skrift som grafik? La' vær' tager jeg kraftigt afstand fra fænomenet med at lave tekst som en webside som grafiske elementer.

Når nogle websidekonstruktører alligevel gør det, er det som regel fordi de selv – eller måske oftere deres kunder – ønsker et ganske bestemt skriftbillede på siden.

I et vist omfang - det vil sige for så vidt angår sidehoved, overskrifter og lignende – kan det alligevel lade sig gøre at bruge en speciel skrift på en sådan måde, at teksten alligevel kan læses af en skærmlæser eller anden software, der ikke har udbytte af en grafik:

Fahrner Image Replacement

Web guru'en Todd Fahrner var den første, der fandt på det, og den metode, jeg har anvendt i mellemrubrikken til dette afsnit hedder Fahrner Image Replacement.

Hvis du ser koden til den røde mellemrubrik, forstår du sikkert, hvad der foregår:

Html-kode:

<h2 class="fir"><span>Fahrner 
Image Replacement>/span></h2>

Stylesheet kode:

h2.fir {
  background:url(fir.png) no-repeat;
  width:432px;
  height:51px;
  margin:0;padding:0;}
  
h2.fir span {
  display:none;}

I en totalt CSS-lam browser er der ingen tvivl om, at du kan læse teksten, men ikke se billedet. Desværre er det sådan en del skærmlæsere ikke læser tekst, hvis display-værdi er sat til none, ligesom jeg mener at vide, at for eksempel Google søgemaskinen heller ikke gør det.

Derfor kan denne metode ikke anbefales.

Phark-metoden

Denne metode har navn efter Mike Rundle's websted ( www.phark.net.

Ved denne metode fifler vi ikke med display-værdien og den kræver heller nogen ekstra span- eller div-markør:

h2.phark {
  background:url(phark.png) no-repeat;
  width:303px;
  height:23px;
  margin:10px 0;padding:0;
  text-indent:-5000px;}

Derimod fifler vi med positionen af teksten. Og det er såvel google som andre søgemaskiner ligesom skærmlæsere aldeles ligeglade med. For sådan software er intet mere ligegyldigt end et elements position.

Problemet med denne metode er i visuelle browsere, at den ikke virker hvis grafikvisningen er slået fra i en ellers CSS-kapabel browsere.

Gilder/Levin-metoden

Jeg foretrækker Gilder/Levin-metoden, der har fået navn efter de to opfindere. Denne metode virker fint, selvom grafikvisningen er slået fra i en CSS-kapabel browser:

Html-kode:

<h2 class="gil"><span></span>Gilder/Levin-metoden</h2>

Stylesheet kode:

h2.gil {
  width:360px;
  height:27px;
  margin:10px 0;padding:0;
  position:relative;}

h2.gil span {
  background:url(gil.gif) no-repeat;
  position:absolute;
  width:100%;
  height:100%;}

Det, der sker her er, at grafikken lægger sig oven på teksten og dækker denne, hvis browseren viser grafik. For at opnå effekten, er der tre betingelser, der skal være opfyldt:

  1. Grafikken i sig selv skal have en baggrundsfarve, svarende til websidens baggrundsfarve. Hvis grafikkens baggrund er transparent, vil teksten kunne ses igennem grafikken.
  2. Overskriften skal have grafikkens mål og skal have position:relative påtrykt.
  3. Derved bliver overskriften referenceramme for span-elementet inde i overskriften. Og det er dette span-element, jeg giver en baggrund.

Denne side er senest opdateret: 1. September, 2006