Hoi Richard,
Ik ken het probleem niet, maar heb wel een oplossing, denk ik.
Voor het menu kan je namelijk ook iets heel anders doen dan image-mapping. Dat is: gewoon de plaatjes als link in de pagina zetten.
Je kan de bezoeker ook wat feedback geven, door het tabje van keuze een ander uiterlijk te geven als men eroverheen muist: "ha, daar gebeurt iets, ik kan klikken!".
Een slimme methode hiervoor is om gebruik te maken van de eigenschap "background-image". Dan is de link zelf doorzichtig, en kijk je naar het plaatje op de achtergrond. Nu heeft CSS ook het prettige verschijnsel, dat je bij hoveren over een link alles van de achtergrond ervan kan veranderen: bv. het plaatje.
Nog slimmer is de truc om niet een hele bubs plaatjes te maken die kunnen wisselen, maar één plaatje waar alles in zit. Met de eigenschap "background-position" kan je dan alle partjes van dat ene plaatje op de gewenste plek rangeren! Voordeel: er treedt geen korte flits op bij het wisselen van plaatje (veroorzaakt door de downloadtijd van het alternatieve plaatje), want het plaatje is al in z'n geheel gedownload, en hoeft alleen maar op de juiste plek geschoven te worden. Nog een voordeel: bij veel plaatjes moet veel keer een verzoek van de bezoekers-pc aan de website-server gedaan worden om een plaatje te leveren: en dat is in feite "uploaden" van het verzoek, en gaat veel langzamer dan downloaden. Bij één plaatje heb je dus tijdwinst. En nog meer winst, omdat het gecombineerde plaatje meestal een kleinere bestandsomvang heeft dan de losse plaatjes.
Zie: broncode. De <span>netjes in de links zijn opgenomen om ook mensen die niet-visueel door de pagina browsen (met text-voorleesbrowsers bv.), toegang tot de vervolgpagina's te geven.
Dan je vraag "schiet u maar": ik heb best wat te schieten, maar tijd schiet me even te kort, dus dat schiet er even bij in en hou je nog tegoed.
Voorschot:
Dit zie je op de testpagina gebeuren: bij "te veel" tekst in het #content gedeelte wandelt de onderkant van de pagina de layout uit.
Oorzaak zijn de aan alle kanten op pixels ingemetselde verhoudingen: er is geen vrijheidsgraad om teksten te kunnen laten uitlopen. Wat dit betreft verloochen je je beroep niet: alles exact vastleggen tot op de 10e van een mm! En als er halve pixels waren, zou je ze waarschijnlijk gebruiken!
In het vak van websites bouwen gaat die exactheid niet op: een webpagina is geen vel papier, maar een ding dat vertoond wordt op het scherm van de bezoekers. En er zijn veel soorten schermen in omloop, en eigen instellingen van surfers, en verschillen tussen browsers, enz.: dat vergt juist een hoge mate van flexibiliteit.
Maar ook daar zijn kneepjes voor. Met css kan je een heleboel regelen, zonder afbreuk te doen aan de basis van de layout. Om erin te komen, is het misschien aardig om het verhaaltje te lezen "
The Graphical Designer and the CSS Zen Guru - a small story about perception".
Tot zover, wordt vervolgd!
CSShunter
PS:
Het is niet persé Apple waarop het mis gaat met de image-mapping. Het gaat ook niet goed met de Safari-browser onder Windows. Ik gok voor 99% op de absolute positionering van alles, en de pixelgewijze maatvoering. Daarin is niets relatief, en dat veroorzaakt dan problemen bij (o.a.) zoomen. Ook vergroten/verkleinen van de lettergrootte (zonder de rest te zoomen) geeft in de huidige layout problemen; die zie je niet in Internet Explorer (die verhindert aanpassing van de lettergrootte) maar wel in andere browsers (die de wensen/behoeften van de bezoekers respecteren). Het harnas is te stijf! Met een meer liquid layout zal dat opgelost zijn.
