Previous Message
Next Message

Toggle z-index on image via CSS/js?

Sent by Michel Bozgounov on 17 March 2006 10:10

OK, I've searched a lot, but couldn't find anything simple enough and useful 
enough at the same time.

What I have in mind:

There's an unordered list. Each LI element contains a small thumbnail image and 
span, which contains a bigger image.

Something like this:

   <li><a href="#"><img src="thumb-1.jpg" alt="" /><span><img 
src="big-image-1.jpg" /></span></a></li>
   <li><a href="#"><img src="thumb-2.jpg" alt="" /><span><img 
src="big-image-2.jpg" /></span></a></li>
   <li><a href="#"><img src="thumb-3.jpg" alt="" /><span><img 
src="big-image-3.jpg" /></span></a></li>
   <li><a href="#"><img src="thumb-4.jpg" alt="" /><span><img 
src="big-image-4.jpg" /></span></a></li>

Here's a rough graphic of it:

|                                 |          |
|                                 | <ul>     |
| THE BIG IMAGE IS HERE           | <li></li>|
| (the 4 images contained in the  | <li></li>|
| SPANs in the LI's are           | <li></li>|
| absolutely positioned           | <li></li>|
| on top of each other here)      |</ul>     |
|                                 |          |

The image inside the SPAN element is ABSOLUTELY positioned somewhere on the 
page, let's say, on the left of the unordered list.

All of the images inside the SPAN element are positioned on the same place.

So only ONE OF THEM is actually showing, the others are covered by it.

When the user clicks on one of the links, this should trigger very small piece 
of JavaScript, which would CHANGE dynamically the z-index of the specific image 
in the SPAN! Let's say, all of the images have initially {z-index: 1: and when 
clicking on the thumbnail, the z-index would change to 10. This will show the 
current image and hide the others!

For example, see:

Only, this should work on an UL. And on one page there should be a possibility 
to have more than one UL of this sort, so IDs would be not a good idea to use in 
this list. The best approach would be, IMHO, to change ONLY one CSS property in 
each of the list items - the z-index of the image inside the SPAN, when user 
clicks on the links inside the LI.

Hope I do not sound very confusing...

I am sure I've seen such examples somewhere, using CSS and a bit of JS but 
cannot find them :(((

A link or to to something similar would help me very much, thanks! :)))


PS If JS is not enabled in the browser, would be nice if simply the bigger image 
would open as a simple link, but I do not know, if it's possible...

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: