Topic awaiting preservation: Z-Index swapping on stacked images (Page 1 of 1)

Hi again guys,

I need your help, I want to have a series of images stacked on top of each other (absolute position and z-index) and have the top image disappear onmouseover to reveal the one beneath and so on - but rather than them completely disappearing I want them to be put at the bottom of the stack so that it never becomes empty and the 'onmouseover = disappear' cycle never ends.

I figure that this would require an array of images that store their z-index value somehow and the images would keep having to change place in the array - in fact the images needn't be stacked on the page, just in the array, although there should be at least two images on the page at any one time so that change from one to the next doesn't jump at all.

Any ideas on how to do this? it gets more complex than that even - because all the images that change are themeselves made up from lots of slices and it is each of these slices that will need the z-index shuffling doobree so far I have only managed a way to create the grid in which the slices will be disaplayed using javascript. That is as follows:

edit - code/html removed - see link below.


[This message has been edited by smonkey (edited 11-03-2003).]

Here's what I'd do.

put all your layer's in an array (not real code)

// The layers current zindex should be the index of the array
layers = new Array(layer1, layer2, layer3);

Then in your function you do this..
temp = layers.pop() // pulls the last item off the array
temp.zindex = 0 // put it on the bottom.
layers.unshift(temp) // put it back at the begining of the array.

for(i=layers.length - 1; i > 0 ; i--) { // loop through the array backwards (from the highest)
layers[i].zIndex = i // Since we're starting from the last this is one higher than it used to be
}

That basically should do it if transferred to real code. It will also loop properly.



.:[ Never resist a perfect moment ]:.

Thanks Bitty,

I will work on that after work and probably be back a little later with new questions.

Thanks again,

Jon

Ok I'm back - I haven't been able to put bitdamaged's words into practice - can't quite see how to fit it all in to what I'm doing so here is an example of what I'm doing - I hope you guys can help me out coz I'm sposed to be handing this tomorrow so to speak (it's part of a project for my multimedia design degree, only a small exercise tho)
http://www.cryokinesis.co.uk/demo/index.htm

so people have said it has problems in firebird, I have firebird and it works fine for me.

it is for something that runs offline so it is a kinda large download.

What I can't figure out is how to get the stacked images to be 'neverending' - basically I need to sort something out with the z-index like bitty said, but I don't quite get it.

Please please help,

Jon

visit my CryoKinesis Online Gallery

smonkey: Once an image has been downsized to 0x0 you could simply decreased its zIndex by the number of images stacked and reset its dimension to the original value. That way, the zIndexwill constantly decrease, below zero, but who cares ?
If you do care about the possible negative zIndex, when you reach a negative value, you could increase the zIndex of all the images stacked below the one you are hovering by the number of images stacked, and voilà.

I have 2 other remarks :

1. It's not important but you can replace :

i==13| |i==26| |i==39| |i==52| |i==65?rowNum++:rowNum;

// ...

rowPos==12?rowPos=0:rowPos++;

by

rowPos==12?rowPos=0,rowNum++:rowPos++;

Which is a little more elegant and saves you to write the N first multiples of 13.

2. You could have done the whole animation with just the big images ( I mean, without slicing them in 650 images ) by using some canvas animation via the clip CSS property. That way you could have preloaded the big images and created the 650 instances later. On the other hand, resizing many big pictures could have been a struggling bottleneck.

Cheers,

Mathieu "POÏ" HENRI