Sjaak Priester

Drie interessante webtrucs (versie 2.0)

Deze website heeft een experimentele fotoshow met een muis-overeffect waarover ik nogal tevreden ben.

Er zitten een aantal slimme HTML-trucjes in, waardoor er geen gebruik hoeft te worden gemaakt van Javascript, en de code heel overzichtelijk en eenvoudig blijft — in vergelijking tenminste tot de gebruikelijke oplossingen.

Mijn fotoshow is, zoals de rest van deze website, ‘toekomstvast’: zo veel mogelijk gebaseerd op CSS (Cascading Style Sheets) volgens de W3C-standaard. Oudere browsers (gebruikt door minder dan 1,5% van de internetsurfers) zullen er waarschijnlijk niet veel van bakken. Pech gehad, zeg ik dan.

Truc 1

De grote foto’s en de ‘thumbnails’ zijn gecombineerd in één jpg-afbeelding. Dat ziet eruit zoals hiernaast. De thumbnail is boven de grote foto geplakt. Hier heb ik het in twee varianten gedaan: zwartwit en kleur. Ik gebruik alleen de zwartwitte.

Aan deze truc zitten drie voordelen.

1. Het aantal jpg-bestanden is de helft van wat normaal nodig is. Er zijn immers geen afzonderlijke bestanden voor de thumbnails en de grote foto‘s.
2. Thumbnails en foto’s kunnen niet verward raken.
3. Het belangrijkste: als de thumbnails geladen zijn, zijn de grote foto’s dat ook. Er zijn geen speciale Javascript-functies nodig om die te ‘preloaden’ zodat ze onmiddellijk beschikbaar zijn als dat nodig is.

Truc 2

Het muiseffect is helemaal vastgelegd in CSS-stijlregels. Er wordt gebruik gemaakt van het standaard hover-effect voor <li>-tags. Er zijn daarom dus ook geen Javascript mouseover- en mouseout-handlers nodig.

De thumbnails zijn in feite items in een gewone, ongeordende lijst (<lu>). In de bijbehorende li:hover stijlregel zitten listige CSS positioneringsregels vervlochten die ervoor zorgen dat het hover-effect niet bij de thumbnail optreedt, maar bij de grote foto.

Truc 3

De gecombineerde foto met thumbnail wordt ingezet als achtergrondafbeelding. Omdat er niets bovenop staat, is er op het oog geen verschil met een gewone afbeelding.

De lijst-items bestaan eigenlijk uit niets anders dan de tekst van het onderschrift. Daaraan is de jpg als achtergrondafbeelding toegevoegd. De CSS stijlregels zorgen ervoor dat het juiste deel van de juiste achtergrondafbeelding wordt vertoond. De grote foto staat in de ‘padding-top’ van het bijschrift. Die is niet, zoals gebruikelijk, een paar pixels hoog, maar zo groot dat de foto er helemaal in past.

De hele fotoshow is niets meer dan een ongeordende lijst (<ul>). In HTML ziet dat er ongeveer zo uit:

<div class="fotoshow">
    ...
    <ul>
        <li style="background-image: url(foto1.jpg);">
            <span>Bijschrift 1</span>
        <li style="background-image: url(foto2.jpg);">
            <span>Bijschrift 2</span>
        ...
    </ul>
</div>

De lijst is ingebed in een div met de class "fotoshow". Het enige bijzondere is dat de tekst van iedere link door een <span> tag wordt omsloten.

In het CSS zitten onder andere de volgende stijlregels:

.fotoshow   {
    position: relative; }
.fotoshow span {
    background-image: inherit;
    background-position: 0 -24px;
    visibility: hidden;
    display: block;
    position: absolute;
    top: 0;
    right: 0 }
.fotoshow li:hover span {
    visibility: visible }

De <div> .fotoshow is relatief gepositioneerd en dient daarmee als ankerpunt voor ingebedde tags.

De <span> krijgt dankzij inherit dezelfde achtergrondafbeelding als de omliggende <li> (Truc 3a) en wordt als blok weergegeven in de rechterbovenhoek van <div> .fotoshow (Truc 3b). De positie van de achtergrondafbeelding wordt zo ingesteld dat alleen de grote foto zichtbaar is (Truc 3c). De <span> is normaal gesproken verborgen (Truc 3d).

Als over de <li> (de thumbnail dus) wordt gehoverd, wordt de <span> zichtbaar gemaakt. Et voilà: een puur op CSS gebaseerde fotoshow.

Was de wereld maar perfect

Inderdaad, en meer in het bijzonder: was Microsoft Internet Explorer maar perfect (of: gebruikte 85% van de internetsurfers maar een andere browser). Want zoals het hierboven staat, werkt het leuk onder de van Gecko afgeleide browsers (Mozilla, Netscape, Firefox etc.) en andere ‘W3C-browsers‘, maar niet onder IE. De redenen zijn (tandengeknars):

1. :hover werkt in IE alleen voor de tag <a>, en niet voor <li>;
2. IE negeert de waarde inherit voor de achtergrondafbeelding.

Het eerste probleem kan worden opgelost met een behavior, zoals ik op deze pagina uitleg.

Het tweede probleem zou te ondervangen zijn door de <span> in de HTML expliciet dezelfde achtergrondafbeelding als de <li> te geven, maar dat stuit me tegen de borst: zo ontstaat wéér lastig te onderhouden en foutgevoelige ‘code bloat’.

Het is verre van ideaal, maar gegeven de omstandigheden toch het beste om de fotoshow bij het laden van de pagina met een klein stukje Javascript te initiëren. Een kleine functie maakt de achtergrondafbeelding van de <span>’s gelijk aan die van de omliggende <li>’s. Om het leed te verzachten, brengen we dit stukje code onder in een behavior en koppelen het via een CSS-stijlregel aan class .fotoshow. Op die manier zie je d’r niks van. Het werkt in principe vanaf IE 5.0, al moet je bij de 5.x generatie wel beducht zijn op nare bijeffecten vanwege het daar gehanteerde ‘oude’ box-model.

Je eigen fotoshow

Wie ook met mijn fotoshow aan de slag wil is hierbij van harte uitgenodigd. Er valt vast nog wel iets aan te verbeteren. De benodigde bestandjes (de stijlregels in "fotoshow.css" en de twee behaviors in "fotoshow.htc" en "hover.htc") staan in dit piepkleine zipje (1291 bytes):

Download fotoshow

Volg verder de aanwijzingen hieronder. Wees terughoudend met het toekennen van margin’s en padding’s, want anders steekt een andere beruchte bug in IE (de zogenaamde ‘three pixel text jog’) zijn afschuwelijke kop op. Reken ook op narigheid in Opera (daarin werkt het wel, maar stellen de thumbnails zich niet netjes aan de rand op). Ik houd me aanbevolen voor op- en aanmerkingen.

Gebruiksaanwijzing

• Zorg dat het document-type ‘HTML 4.0 Strict’ is of hoger, en niet ‘HTML 4.0 Transitional’ (zodat IE het standaard box-model volgt).
• Maak een ongeordende lijst (<ul>) met de bijschriften onder de grote foto.
• Zorg dat de bijschriften omsloten worden door <span>. De list-items zien er dan zo uit:

  <li><span>Bijschrift</span>

• Zet de combi-afbeelding van foto met thumbnail op als achtergrond van de link. Dat kan bijvoorbeeld zo:

  <li style="background-image: url(combifoto.jpg);">
      <span>Bijschrift</span>

• Maak een <div> met class="foto" en de afmetingen van de grote afbeelding en plaats die vóór de lijst. Plaats er als tekst het bijschrift in van de default-afbeelding (de afbeelding dus die vertoond wordt als er niet boven de thumbnails wordt gehoverd).
• Omspan het geheel door een <div> met class="fotoshow".
• Zorg dat de stijlregels voor de classes fotoshow en foto geladen zijn (neem ze op in de pagina of link naar een "fotoshow.css") en pas ze aan volgens de tabel. De bestandjes "fotoshow.htc" en "hover.htc" moeten bereikbaar zijn.

selector	property	waarde
.fotoshow	height	de hoogte van de grote afbeelding + (minstens) de hoogte van het bijschrift
	width	de breedte van de afbeelding + de benodigde breedte voor de thumbnails links van de afbeelding (thumbnails die niet links passen, komen onderaan)
	background-color	achtergrondkleur van het geheel
	margin, padding, border	naar smaak
.fotoshow li	height, width	de afmetingen van de thumbnail
	background-position	relatieve positie van de thumbnail in het gecombineerde beeldbestand
	margin, padding, border	naar smaak, voor de thumbnails
.fotoshow span	top	als er geen margin, border of padding van de grote afbeelding is: 0
		als er wel margin, border of padding is: margin-top + border-top-width + padding-top
	right	als er geen margin, border of padding van de grote afbeelding is: 0
		als er wel margin, border of padding is: margin-right + border-right-width + padding-right; maar maak eventueel tot 3px groter in verband met IE; een kwestie van uitproberen
.fotoshow li>span	right	als er geen margin, border of padding van de grote afbeelding is: 0
		de correcte waarde voor browsers die zich aan de regels houden
.foto	background-image	de default-afbeelding
.foto, .fotoshow span	height	de hoogte van het bijschrift
	padding-left	inspringing van het bijschrift
	width	breedte van de grote afbeelding – padding-left
	padding-top	de hoogte van de grote afbeelding + eventueel een beetje om het bijschrift te positioneren
	background-position	horziontaal: 0, verticaal: – de hoogte van de thumbnail
	background-color	de achtergrondkleur van het bijschrift (en de eventuele padding om de foto)
	font-size, color etc.	grootte, tekstkleur en andere eigenschappen van het bijschrift
	border	naar smaak