text-indent en tekst in een afbeelding

Tekst in een afbeelding? Dit vind ik zelf wel een leuke oplossing.

  1. Zet het plaatje in de achtergrond
  2. Zet de tekst gewoon in de HTML
  3. Zet in de CSS  text-indent op -99999

Een voorbeeld voor een plaatje als link

Aanklikbare afbeelding
Aanklikbare afbeelding

HTML
<a id=”header” href=”/main.php” title=”Naar de website van Oogenlust”>Oogenlust</a>

CSS
#header {
display: block;
width: 627px;
height: 113px;
background-image: url(‘/images/bovenbalk-reactieformulier.jpg’);
background-repeat: no-repeat;
text-indent: -9999px;
}

Een voorbeeld voor een adresbalk

Adresbalk

HTML
<div id=”footer”>Oogenlust BV Bezoekadres: De run 6825 5504 DW Veldhoven telefoon: 040 2532482 fax: 040 2534678 e-mail: oogen@oogenlust.com Postadres: De Run 6624 5504 DT Veldhoven</div>

CSS
#footer {
width: 627px;
height: 37px;
background-image: url(‘/afbeeldingen/adresbalk.gif’);
background-repeat: no-repeat;
text-indent: -9999px;
}

Getest op de Mac in Firefox, Safari en Opera en op Windows in Firefox en IE7
Nadeel: het werkt niet als iemand plaatjes heeft uitstaan, maar de zoekmachine leest wel mee. Hoe hat moet staat op http://css-tricks.com/nine-techniques-for-css-image-replacement/

Bronnen en gerelateerde links

Advertisements

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s