#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    4
    Rep Power
    0

    Exclamation


    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
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    36
    Rep Power
    14

    Lightbulb


    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
  4. #3
  5. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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.
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16

IMN logo majestic logo threadwatch logo seochat tools logo