CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Image rollovers using CSS's z-index?

Discuss Image rollovers using CSS's z-index? in the CSS Help forum on Dev Shed.
Image rollovers using CSS's z-index? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old April 3rd, 2001, 11:07 AM
cflannagan cflannagan is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2001
Posts: 4 cflannagan User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via AIM to cflannagan
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
Reply With Quote
  #2  
Old April 3rd, 2001, 12:24 PM
afabsy afabsy is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2001
Posts: 36 afabsy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 8
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
Reply With Quote
  #3  
Old April 9th, 2001, 10:56 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
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.
Reply With Quote
  #4  
Old April 10th, 2001, 10:52 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Image rollovers using CSS's z-index?

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

 Free IT White Papers!
 
Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.
 
Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.
 
Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.
 
Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.
 
Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway.