What I would do is store the original z-index on the object as an
expando attribute, and then your function would only need to change
one z-index at a time, and revert the rest.
First, give all of these layers a class attribute. Make a new style
with no actual style changes in it (I’m calling mine demo). Click on
each DIV and apply the style. So now each of your DIVs would have
class=“demo” in their HTML.
Next, get a reference to all of these items. Apply Protaculous to the
page, choose prototype-packed in the Library picker, and paste the
following into the top Function Body editor:
var boxes = $$('.demo').each(function(elm){
elm.writeAttribute('data-z-index',elm.getStyle('z-index');
});
So that’s gotten you a reference to all of the demo boxes, and it’s
also given each one of the boxes a data attribute with the value of
the original z-index, which you’ll use to restore the stack when
choosing another layer to float to the top.
Now your rollover elements need to know which element they are related
to, so for that you want to use the target box’s ID as the HREF for
their link. Select your first rollover element, and apply a link to
it. Use the External tab of the Hyperlink dialog to enter #layer1 as
the URL. Do the same for the others, changing to match the ID of each
additional box.
Make another class style called rollover, and apply that to each of
your rollover elements. Back in Protaculous, add another bit of code:
Element.addMethods({
revertZ = function(element){
var element = $('element');
element.setStyle('z-index:' +
element.readAttribute('data-z-index'));
return element;
}
});
$$('.rollover').each(function(elm){
elm.observe('mouseover',function(evt){
boxes.invoke('revertZ');
$(this.href.split('#').last()).setStyle('z-index:1000');
});
elm.observe('click', function(evt){
evt.stop();
});
});
What this second bit has done is the following:
First, we add a new function to all members of the Element class (the
parent class of every DOM object on the page) teaching them how to
revert to their stored z-index.
Next, we set a listener on each of the items on the page that have the
classname ‘rollover’. When they are moused over, all the elements in
your stack revert to their natural z-index as set by Freeway, then the
element that matches the href of that rollover is given a z-index of
1000, vaulting it to the top.
Finally, another observer just to trap any errant clicks on the
rollovers, since that might cause the page to scroll wildly (since
we’re using what look like anchor links to the browser).
There’s no mouseout behavior here, but you could add that if you like.
The way this is written currently, the last mouseover will stick until
you either mouse over another target or you reload the page.
Walter
On Mar 17, 2011, at 8:25 PM, Pete wrote:
I have 8 div boxes that overlap how do I properly change the z-index
on each box so with a mouseover a single div moves to the front .
This works with only two layers but not eight?
function changeZunder() {
layer1.style.zIndex = 10;
layer2.style.zIndex = 50;
}
function changeZover() {
layer1.style.zIndex = 50;
layer2.style.zIndex = 10;
}
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options