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/
