Background image map

A.E.Veltstra
June 1, 2003

Why is part of this page in English?
Especially since the rest of the site is in Dutch? Well, this page serves as an example for an English speaking friend.
Waarom is deze pagina deels in het Engels?
Vooral daar de rest van de site in het Nederlands staat? Welnu, deze pagina toont een voorbeeld voor een Engels sprekende kennis.
The picture you see below, isn't there. No, really. Try to copy it to your computer. It's a background image.
Why?
Well, because a friend asked if it was possible to attach an image map to a background image. Yes, I said, that's possible.
Now, there's two solutions. One uses a table to position. The other uses pure css positioning. Below is the tabled solution.
De afbeelding die je hieronder ziet, is er niet. Echt waar. Kopieer hem maar naar je computer. Het is een achtergrondafbeelding.
Waarom?
Welnu, omdat een kennis vroeg of het mogelijk was een image-map aan een achtergrondafbeelding te koppelen. Ja, zei ik, dat is mogelijk.
Nu zijn er twee mogelijkheden. De ene gebruikt een tabel voor de positionering. De andere gebruikt pure css positionering. De oplossing hieronder gebruikt een tabel.
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. This solution avoids having to position all elements fixed.
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. Deze oplossing voorkomt dat je alle onderdelen "fixed" moet plaatsen.