Previous Message
Next Message

Toggle z-index on image via CSS/js?

Sent by tedd on 17 March 2006 12:12


Michel:

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

http://www.sperling.com/examples/styleswitch/

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:

http://www.xn--ovg.com

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

tedd



>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:
>
><ul>
>    <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>
></ul>
>
>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: http://home.hetnet.nl/~hans-kuipers5/prop/z-index.htm
>or
>http://icant.co.uk/articles/dyngallery/gallery.html
>
>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! :)))
>
>
>Michel
>
>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]]
>http://www.css-discuss.org/mailman/listinfo/css-d
>IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


-- 
--------------------------------------------------------------------------------
http://sperling.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: