Previous Message
Next Message

Toggle z-index on image via CSS/js?

Sent by tedd on 17 March 2006 12:12


You might try absolute positioning the images on top of one another 
and then use:

to change their css z-index.

The first link you provided below didn't work, and the second link is 
neat, but I've done similar examples at:

in php -- I find php works better for this sort of thing.


>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 --

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

Message thread: