Navigatiebalk met één achtergrondafbeelding (sprites)

Deze tutorial maakt deel uit van een serie van vijf:

  1. Menu met achtergrondafbeeldingen (Zelfstudiehandboek pag.331)
  2. Gepositioneerd menu (Zelfstudiehandboek pag.333)
  3. Menu met sprites
  4. Elastic menu met afbeeldingen (Zelfstudiehandboek pag.334)
  5. Sprites met clips

Waarom verborgen afbeeldingen?

Voor dit menu is in de HTML-code gebruik gemaakt van een lijst met tekst-links. Dat maakt de navigatie toegankelijker (screenreaders lezen geen plaatjes) en geeft voordeel bij de zoekmachineindexering (Google leest alleen de code). Maar wat je ziet in de browser is een afbeelding, geplaatst als achtergrondafbeelding in de lijst. De tekst is met CSS uit beeld geplaatst: die staat er wel maar je ziet 'm niet. De mouseover komt gewoon van de achtergrondafbeelding van de a:hover.

Techniek

Er is hier gebruik gemaakt van één en dezelfde afbeelding voor zowel het element ul als voor de a:hovers. Voordeel is dat de afbeelding in de browser al geladen is als de a:hover actief wordt. Met hulp van positionering schuift het juiste plaatje in beeld voor de a:hover van de gekozen link. Dezelfde afbeelding wordt dus in zowel het element ul als voor de a:hover als achtergrond gebruikt.

De achtergrond van de navigatiebalk

Flikkering

Voordeel was ooit de weergave in sommige browsers, deze lieten een flikkering zien bij de mouseover als deze een eigen afzonderlijke achtergrondafbeelding had. Als de afbeelding van de mouseover deel uitmaakt van de van afbeelding voor de normale staat (in dit geval de lijst), dan is die al direct geladen zodat er geen vertraging meer optreedt doordat bij de mouseover eerst nog het plaatje moet worden opgehaald van de server. Met de huidge generatie browsers en de snelle verbindingen van tegenwoordig kunnen zowel de normale staat als de a:hover zonder probleem ieder hun eigen achtergrondafbeelding hebben. Dat maakt deze oplossing onnodig bewerkelijk maar wel interessant voor je perceptie van CSS.

KB's en responsetijd

Als je kijkt naar de kB's en de laadsnelheid van de pagina valt er met deze werkwijze nog altijd winst te behalen. Eén afbeelding die meerdere kleine afbeeldingen bevat zal in de regel minder kB's zijn dan de losse plaatjes bij elkaar opgeteld. De HTTP-requests van de verschillende plaatjes zal meer responsetijd kosten dan die van één enkel plaatje.

Elastic design

Bovenstaande opzet leent zich niet voor elastic design omdat de afbeeldingen als achtergrond zijn geplaatst: je kunt ze geen afmeting geven en ze schalen dus niet mee als de bezoeker de font-size vergroot. Alternatief is om de afbeeldingen in de HTML-code te plaatsen. Hoe deze volgende stap werkt kan je zien in het elastic menu.

Javascript

Als dit je te allemaal ver gaat en je besluit om toch gebruik te maken van koppelingen die bestaan uit afbeeldingen, dan hebben deze voor het mouseover-effect javascript nodig . In Dreamweaver kan je een navigatiebalk met javascript maken met Menu > Invoegen > Afbeeldingsobjecten > Navigatiebalk (Menu > Insert > Image Objects > Navigation Bar)*.

Uiteraard zullen deze javascript-muisovers niet werken als de bezoeker javascript uit heeft staan. Maar zolang je er wat betreft de koppeling maar voor zorgt dat deze in de HTML-code gewoon te lezen is in het element a, zal de navigatie altijd blijven werken met javascript uit. Slechts het effect ontbreekt. Zorg wel voor ingevulde attributen alt voor de screenreaders.

* Als het gaat om één enkele button kies dan voor Rollover-afbeelding (Rollover Image). Dreamweaver heeft in venster Gedragingen (Behaviors) standaard een aantal javascripts staan. Je kunt hier ook per button kiezen voor Navigatiebalkafbeelding instellen (Swap Image). Lees meer over het toepassen van gedragingen en javascripts in de Helpfunctie.

Meer over sprites:

Terug | WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen