27th June 2008

Image transitions on menu rollover using Javascript (Mootools)

Before javascript frameworks effects like this could only be achieved using Flash. However, since prototype came along things have changed somewhat and now I'll show you this really simple example on how to make a nice image transition on rollover using Mootools (my framework of choice).

What we're aiming to do is take a very basic website with a header image and have that image fade out and a different one fade in when you roll over another navigation item.

So in the above image, we've got a Ferrari picture but when rolling over another nav item, we aim to fade in a picture of a jellyfish. Click the 'view demo' link on the right hand side to see this in action.

XHTML

Within my container I have a 'banner-container' that contains all my images and within that I have 'banner-nav' which is my main navigation (that will dictate the banners):

<div id="banner-container"> <img id="img1" src="images/1.jpg" alt="item one" title="item one" /> <img id="img2" src="images/2.jpg" alt="item two" title="item two" /> <img id="img3" src="images/3.jpg" alt="item three" title="item three" /> <img id="img4" src="images/4.jpg" alt="item four" title="item four" /> <div id="banner-nav"> <ul> <li><a href="#1" id="1">Item one</a></li> <li><a href="#2" id="2">Item two</a></li> <li><a href="#3" id="3">Item three</a></li> <li><a href="#4" id="4">Item four</a></li> </ul> </div> </div>

CSS

All I'm doing with the CSS is dictating the positioning of my website (as usual, nothing interesting there) but the important thing to note is that the banner-container is positioned relatively, so that each of the banner-images can be positioned absolutely (ensuring they sit on top of one another). This means that they occupy the same space on the web page, so normally you'd only ever see the top one.

#banner-container { width:100%; height:200px; position:relative; background-color:#000000; } #banner-container img { display:none; position:absolute; top:0px; left:0px; } #banner-nav { height:3em; width:1000px; position:absolute; bottom:0px; left:0px; background-color:#000000; } #banner-nav ul { padding-top:0.7em; } #banner-nav li { display:block; float:left; padding-right:30px; padding-left:10px; } #banner-nav li a { color:#999999; font-size:130%; text-decoration:none; } #banner-nav li a.active { color:#FFFFFF; font-size:130%; text-decoration:none; }

The UL/LI markup is textbook for getting the navigation to sit inline and be styled, nothing worth noting there.

Javascript

I'll break this down into two; first we'll look at how I'm initialising everything and applying event listeners:

window.addEvent('domready', function() { //set the default image activeImage = 'img1'; activeLink = '1'; //initialise the default image var initialise = $(activeImage).setStyles({display:'block',opacity: 0}); new Fx.Style(initialise, 'opacity', {duration: 1} ).set(1); $(activeLink).className = "active"; });

First off I'm setting the default image and the link I want to be active. I'm then initialising the default image by finding the element with the ID set in the 'activeImage' variable and setting the CSS property 'display' to be block. I'm then creating an effect and setting the opacity to be 1 (visible). The thing to note is that using effect.set(1) immediately sets the opacity to be 1. I'm then applying a class of active to the link that was hovered over (for styling purposes if neccessary).

//event listener $('banner-nav').getElements('a').addEvent('mouseenter', function(e) { new Event(e).stop(); $(activeLink).className = ""; this.className = "active"; activeLink = this.id; var newImage = 'img'+this.id; transitionImage(activeImage,newImage); });

I'm now applying an event-listener to the page; this is listening to the banner-nav region for when I roll the mouse over one of the links. I've placed a .stop() on the event because my links don't go anywhere whereas in reality you'd probably want your navigation to work... I'm unsetting the 'active' class on the active link and setting it on the link I've just rolled over. I then set the current link to be the active link. I then take the ID off the link - which handily relates to the image I need!

I can then append the ID to 'img' and pass it to the transitionImage function (which takes two parameters, the old active image and the new one).

function transitionImage(oldImage,newImage) { var fadeOut = function() { var div = $(oldImage).setStyles({ opacity: 1 }); new Fx.Style(div, 'opacity', {duration: 700}).start(0); fadeIn(); }; var fadeIn = function() { var div2 = $(newImage).setStyles({ display:'block', opacity: 0 }); new Fx.Style(div2, 'opacity', {duration: 700}).start(1); }; if(newImage != activeImage) { fadeOut(); activeImage = newImage; } }

I'm creating two functions in this function; fadeOut and fadeIn. fadeOut sets the old image opacity to be 100% visible and then fades it out over 700ms. At this point it would call the fadeIn function. fadeIn sets the new image to be display:block (rather than display:none) but also sets the opacity to be 0% visible. Then over 700ms it is faded in.

The if statemenet at the bottom is what controls the entire process. It checks that the two parameters passed to the function aren't the same (i.e. that you've rolled over the active navigation item and there's no change to be made). Otherwise it calls fadeOut (which in turn calls fadeIn) and then sets the new activeImage to be the new one you passed through.

There you have it, a very *very* basic implementation of image banner transitions without using Flash.

Improvements

Because this is a simplified version there are numerous improvements that can be made. If you view the demo (see on the right) you can easily stress it out by whizzing your mouse quickly across all of the links, so it's worth setting a variable to check whether a transition is in process or not before starting another. The JS is a little awkward too but that's just my awkward way of doing things :)

Tagged with javascript, xhtml, widget