Yep see http://mootools.net/shell/m3ngD/31/
On Thu, Jul 22, 2010 at 2:55 PM, giantdrummerboy <[email protected]>wrote: > I'm using this bit of code for a page, and I was wondering if there > would be a way to set one of the pictures to be visible when the page > loads. > > On Aug 17 2009, 5:21 am, Jacob Gube <[email protected]> wrote: > /snip/ > > So I set the position:absolute style of the div's in JavaScript so > > that - without JS - people can still see the divs below the highest z- > > index div. I also hid the divs using opacity:0. > > > > Next, I assigned a mouseenter event listener on all .navlist items > > using the addEvent method. on mouseenter on any list item, it first > > hides any divs that are showing, and then shows the div whose array > > index is the same as the list item; the fade method (Tween class) does > > the hiding and showing, indexOf method gets the target list item's > > array index. > > > > This makes the assumption that the first list item will show the first > > div, the second list item shows the second div, and so on. In that > > respect, this won't be plug-and-play in your example since it looks > > like you're using (or should be using) nested unordered lists; easy > > fix is to give second-level unordered lists a class (i.e. .subNav). > > > > HTML: > > <ul class="nav"> > > <li>Div 1</li> > > <li>Div 2</li> > > <li>Div 3</li> > > </ul> > > <div id="frame_preview"> > > <div>1</div> > > <div>2</div> > > <div>3</div> > > </div> > > > > CSS: > > #frame_preview{ > > position:relative; /* IE */} > > > > div { > > width:400px; > > height:400px; > > /* So you can see what's going on easily > > remove this later > > */ > > border:1px solid #ccc; > > > > } > > > > JS: > > <script type="text/javascript"> > > $(window).addEvent('domready', function(){ > > varframeDivs = $$('#frame_preview div'); > > varnavItems= $$('.navli'); > > // Set style in JS for degradation > > frameDivs.setStyles({ > > 'position': 'absolute', > > 'left': 0, > > 'top': 0, > > // Hide on first load > > 'opacity': 0 > > }); > > > > navItems.addEvent('mouseenter', function(){ > > // Fade out any div showing > > frameDivs.fade('out'); > > // Fade in div with index equal to this list item > > frameDivs[navItems.indexOf(this)].fade('in'); > > }); > > > > }); > > > > </script> > > Here is the jsfiddle for this example: http://mooshell.net/m3ngD/
