Hoi HeerJ,
Snapt iemand hoe dat komt ...
Als ik het zo bekijk, komt het omdat de eerste keer de hover-images #apDiv1 t/m #apDiv8 niet getoond worden via het css-voorschrift
{ visibility: hidden; } dat hiervoor telkens in de <head> is opgenomen.
Het spry-menu maakt vervolgens het betreffende schilderij zichtbaar door eerst het element een Opacity=0 te geven (helemaal doorzichtig), dan de visibility op "visible" te zetten (maar door de Opacity=0 is er nog niets te zien), en dan via het Spry-javascript het getal 0 van de Opacity langzaam op te hogen naar 1 (helemaal ondoorzichtig) = zo gaat het infaden.
Het uitfaden gaat analoog: de Opacity tuft weer van 1 naar 0 terug, en de visibility wordt weer op "hidden" gezet.
Als het goed is. Maar de error-console van de Firefox
Webdeveloper Toolbar geeft aan dat er fouten in het javascript van het Spry-menu zitten.
Ik vermoed dat het script bij het uitfaden blijft hangen nadat de Opacity op 0 is gezet, en dat dan de visibility niet meer teruggezet wordt naar "hidden". Dan is de de afbeelding er wel op de pagina, en door de z-index in een laag boven de Contact-link (!), maar volledig transparant. Daardoor is de link dan onbereikbaar geworden, terwijl de pagina er op het oog hetzelfde uitziet als voordat de hover plaatsvond.
... en nog beter wat ik er aan kan doen?
- De echte oplossing is het javascript van het Spry-menu induiken, en daar verbeteringen in aanbrengen. - Voor mij is dat te ingewikkeld.
- Maar zie ook PS-2!
- Als simpele css-ziel zie ik wel een work-around als je het Spry-gebeuren wilt handhaven: de Contact-link niet op die plaats zetten.
Heel plausibel, en niet verkeerd in het design, lijkt me om de Contact-link direct onder de "Terug" link aan de linkerbovenkant te situeren. Of, beter nog, de Contact-link bovenaan, en de Terug-link in de regel eronder (dat is maar een hulpfunctie die niet persé nodig is). Misschien ook in een wat kleinere lettergrootte. Want voor mij vraagt in elk geval het "Terug" (als eerste element op de pagina) veel te veel aandacht t.o.v. de rest. Het eerste wat ik opmerk, moet niet zijn dat ik terug moet! 
Met vriendelijke groet,
CSShunter
PS-1:
Als de hover-afbeeldingen iets minder hoog worden, past de pagina ook prettig op een resolutie van 1024x768 (die nog veel in omloop is).
PS-2:
Het hover-effect is veel eenvoudiger met een css-hover te bereiken, zonder javascript. Voorbeeldje:
zie hier.
Dit kan desgewenst aangevuld worden met een fade-in/fade-out script, maar dat kan een heel kort eenvoudig scriptje zijn. Voordelen: dan is het zware Spry-script helemaal niet nodig (2470 regels en 75kB! :shocked: ), en bezoekers zonder ingeschakeld javascript kunnen de grote afbeeldingen ook zien, zij het zonder de verfraaiing van het in- en uitfaden.
