A.E.Veltstra
1 June 2003
A background image isn't really part of the web page. How does one apply an image map? Here's one solution using pure css.
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 (this one) uses pure css positioning.
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.
Afterthoughts
The only browser that I've seen so far that doesn't render this correctly, is Opera 6.02 for Mac.
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 (this one) uses pure css positioning.
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.
Afterthoughts
The only browser that I've seen so far that doesn't render this correctly, is Opera 6.02 for Mac.
Need problem solving?
Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.