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 PROTECTED] >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 PROTECTED] 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/
