Overview

A very important element of any website is its navigation or menu, and a good website has a non-obtrusive but prominent one that the user knows intuitively to interact with. A common menu technique I use is having an image as the menu item with a second image as the roll-over state.  To accomplish this I utilize JQuery to modify the DOM based on the user’s interaction. In Part 1 of the guide we will lay the ground work by defining the base elements and javascript that will perform the image swap.

Basic Roll-over Roll-out Set-up

The javascript code we will implement will work within any Document hierarchy that utilizes the navigation element as an image wrapped in an anchor tag, example:

<a href="../about/" ><img src="../img/about_btn.jpg" width="82" height="68" alt="About" /></a>

Using the above as our basic structure we need to add some identification to the link (Anchor tag) that this is a navigation element to do this we will add a class to them of  “siteNav” so our links will now look like:

<a class="siteNav" href="../about/" ><img src="../img/about_btn.jpg" width="82" height="68" alt="About" /></a>

Now that we have identification on the navigation links we can start implementing our javascript. To start with we will utilize the jquery ready function so that our code is called after the page has been loaded and is ready for manipulation. Once the page is loaded we can utilize the identifying class to access and manipulate the navigation items using the each function.

$(document).ready(function () {
    $(".siteNav" ).each(function (i) {
    });
});

Inside the each statement we can set-up functions to fire on mouse events (rollover, and rollout) to simplify it further JQuery has a nice hover function that we will utilize to modify our navigation images. The basic logic we are going to instantiate is that on rollover modify the image url so it shows the over image, and on rollout modify the url so it shows the out or default image. To accomplish this we will name all over images the same as the default image with _over appended to the name. An example is about.jpg and about_over.jpg.

$(document).ready(function () {
    $(".siteNav" ).each(function (i) {
        $(this).hover( function () {
            var img_url = $(this).find("img:last").attr("src");
            $(this).find("img:last").attr("src", img_url.substring( 0, img_url.indexOf( ".jpg") ) + "_over.jpg" );
        },
        function () {
            var img_url = $(this).find("img:last").attr("src");
            $(this).find("img:last").attr("src", img_url.substring( 0, img_url.indexOf( "_over.jpg") ) + ".jpg" );
        );
        });
    });
});

Conclusion

With this set-up we now have a navigation whose items change images when the user rolls over them.  Now to be fully informative and user friendly you will also want to have an active state such that if a user is not interacting with the navigation the link that corresponds to the page they are on will remain in its rollover state. How to accomplish this is outlined in Part 2.