A.E.Veltstra
June 1, 2003
| This example is purely css Well, at least the image map part is. There's a tabled example as well. Normally, you'd start reading there. (As you see when trying to activate the previous link, the image map areas are rendered in front of it.) |
Dit voorbeeld is puur css In ieder geval het deel met de image map. Er is ook een voorbeeld gebaseerd op een tabel. Dat is de pagina waar je normaalgesproken zou beginnen. (Zoals je zult zien als je die link uitprobeert, wordt de image-map eroverheen geprojecteerd.) |
| How's that done? Take a look at the source code of this page. As you'll see, the background image is defined in the cascading style sheet. Thus, it's not really there but gets displayed anyway. Secondly, there's a transparant overlay on which the image map areas are mapped. All elements use a fixed position, thus the rest of the page scrolls while they don't. Oh, and the only browser that I've seen so far that doesn't render this correctly, is Opera 6.02 for Mac. |
Hoe werkt dat? Kijk naar de broncode van deze pagina. Zoals je ziet, is de achtergrondafbeelding opgegeven in de cascading stylesheet. Daarom is hij niet echt aanwezig maar wordt hij toch getoond. Ten tweede is e over de achtergrond een transparante afbeelding heengelegd, waarop de image-map areas zijn afgetekend. Alle onderdelen hebben de position-waarde "fixed", zodat zij blijven staan terwijl de rest van de pagina scrollt. O, en de enige browser tot nu toe waarvan ik gezien heb dat hij dit niet correct toont, is Opera 6.02 voor Mac. |
