Navigatiebalk met achtergrondafbeeldingen

Tekstlinks hebben de voorkeur

Tekstlinks hebben de voorkeur boven afbeeldingen met tekst. Dat maakt de navigatie toegankelijker (schermlezers lezen geen plaatjes) en geeft voordeel bij de zoekmachineindexering (Google leest alleen de code). Uiteraard is er het alt-attribuut waar je als alternatief de beschrijving van een plaatje kunt plaatsen, maar schermlezers en zoekmachines lezen de tekst van een link liever in de link zelf dan via het alt-attribuut.

Maar jij wilt dat mooie plaatje gebruiken

Maar stel het ontwerp van de links laat zich niet eenvoudig vangen met CSS. Dan wordt het toch een plaatje. Gelukkig sluit het één het ander niet uit. Hier volgt een uitleg over het maken van een link die in de HTML-code gewoon tekst als inhoud heeft maar op het beeldscherm een afbeelding laat zien.

Techniek

De HTML-code van de navigatiebalk bestaat uit een lijst met tekstlinks:

<ul id="menu">
  <li id="buteen"><a href="#">Over Waalweb</a></li>
  <li id="buttwee"><a href="#">Webdesign</a></li>
  <li id="butdrie"><a href="#">Hosting</a></li>
  <li id="butvier"><a href="#">Portfolio</a></li>
  <li id="butvijf"><a href="#">Contact</a></li>
</ul>

Maar die tekst zie je dus niet terug in de browser, daar zie je afbeeldingen als links. Deze zijn geplaatst als achtergrondafbeelding in de lijstitems. Allereerst de afbeeldingen van de 'gewone' staat. In dit voorbeeld is gebruik gemaakt van één afbeelding waarin de afbeeldingen van de verschillende links zijn samengevoegd.

ul#menu{
  background: url(../afbeeldingen/menutotaal.gif) no-repeat;
  width: 774px;
  margin: 0 auto;
  padding: 0;
  height: 35px;
}

De lijstitems krijgen een breedte en hoogte die overeenkomt met de breedte van de (achtergrond)afbeelding die je hierna geeft aan de link. Je geeft een float in zodat ze naast elkaar komen te staan en je schakelt de opsommingstekens uit:

#menu li {
  width: 154px;
  height: 35px;
  float: left;
  list-style: none;
}

De tekst wordt met CSS uit beeld geplaatst: hij staat er wel maar je ziet 'm niet. Verder maak je er een block-level element van: nu gebruikt deze de volledig beschikbare breedte en kan je er een hoogte aan geven. Die hoogte zorgt dat de volledige (achtergrond)afbeelding van de a:hover straks te zien zal zijn:

#menu li a {
  text-indent: -999em;
  display: block;
  height: 35px;
}

De wisseling van plaatje bij muisover komt van de achtergrondafbeelding die in CSS is ingegeven voor de a:hove:.

#buteen a:hover { background: url(../afbeeldingen/menueen-over.gif) no-repeat; }
#buttwee a:hover { background: url(../afbeeldingen/menutwee-over.gif) no-repeat; }
#butdrie a:hover { background: url(../afbeeldingen/menudrie-over.gif) no-repeat; }
#butvier a:hover { background: url(../afbeeldingen/menuvier-over.gif) no-repeat; }
#butvijf a:hover { background: url(../afbeeldingen/menuvijf-over.gif) no-repeat; }


Firefox toont rand om link

Als je deze pagina bekijkt in Firefox zal je een rand zien als je klikt op een link in het menu. Bij een aanpak zoals op dee pagina is dat een behoorlijk grote rechthoek, niet zo mooi dus. Geef de volgende CSS-regel in om de rand niet te zien:

a:focus {
  outline: none;
}


Omdat a:focus aangeeft hoe een link eruit ziet als de lezer het toetsenbord gebruikt ipv de muis, is het goed om je het belang hiervan wel te realiseren. Zorg dus wel voor een vormgeving van a:focus. Goede gewoonte is om overal waar a:hover staat ook a:focus te geve. Als de link dan met bijv. de tab-toets wordt gebruikt zal deze er gelijk uitzien als met de muis:

a:hover, a:focus {
  text-decoration: underline;
}

Als deze oplossing je duidelijk is, kun je het uitbreiden met het gebruik van sprites.