Image rollovers using CSS's z-index?

Dev Shed Forums Sponsor:

April 3rd, 2001, 11:07 AM

cflannagan

Junior Member

Join Date: Mar 2001

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

I know the easy/quick solutions is to use the standard JavaScript image rollover code, but hear me out:

I have about 10 small, bandwidth-friendly images that I want to pop up when mouseovering one of 10 spots.

I want all of those 10 images to show up in the same place, on top of a background picture. The background picture is pretty big.

So, if I use the standard JavaScript rollover code, I will have to preload every image file that includes both the background and the popup graphic.. not bandwidth friendly.

So I've been looking at CSS's z-index, visibility, and positioning properties. I think I can have the background image stay there (static), while using CSS-positioning properties, but I'm not sure exactly how to implement it. Is it possible? If so, please point me to the right direction.

Craig

April 3rd, 2001, 12:24 PM

afabsy

Contributing User

Join Date: Mar 2001

Posts: 36

Time spent in forums: < 1 sec
Reputation Power: 13

Well,

I faced similar task but with layers - only one was visible at the moment, other were disbaled. It's a bit tricky because you need to prove JS code to be compliant with IEs and NSs (and other browsers) ....

Ciao

April 9th, 2001, 10:56 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 15

Ah, yes, the DHTML rollover....not only doable but much more flexible than the venerable 'replaced element' approach. The problem with your question is that any answer would have to encompass a whole bunch of core DHTML - client sniffing (browser detection), getting cross-browser object references, getting/setting browser-specific properties, etc, etc.

One comment - CSS static positioning is just relative (inflow) positioning that can't be reset; and a 'background image' is, of course, more than just an embedded image (<img>) that happens to be in the background (newer browsers support a CSS background-attachment:fixed property that keeps the background from scrolling).

You could do worse than going to http://www.webreference.com and reading the whole site (just kidding!).

Last edited by adios : April 10th, 2001 at 09:21 PM.

April 10th, 2001, 10:52 PM