Tag: html

This tutorial illustrates how to create a simple Image Rollover Navigation in JQuery. I know, I know, why aren’t you using CSS for this?!

Well, there are just certain use cases out there that require images as I found out the hard way a few years back so I decided to post this article on how to set it up because sometimes you need a bit of code without loading in a massive JQuery plugin. I’m sure many of us have been there. Of course most JQuery Pro’s can tackle this without a sweat but for the JQuery Novice out there, this bit of code is for you.

First you’ll need some very basic HTML:

<ul class="nav">
    <li><a id="nav1"></a></li>
    <li><a id="nav2"></a></li>
    <li><a id="nav3"></a></li>
</ul>

Like most, I tend to build my menu’s using a list. But since we’re using graphics instead of CSS for our buttons, we need to assign ID’s to each link.

Here’s some CSS:

.nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.nav a {
    display: inline-block;
    cursor: pointer;
    height: 43px;  
}

#nav1 {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_help.jpg') no-repeat;
    width: 93px;
}

#nav1:hover {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_help_over.jpg') no-repeat;
    width: 93px;
}

#nav2 {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_product_info.jpg') no-repeat;
    width: 91px;
}

#nav2:hover {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_product_info_over.jpg') no-repeat;
    width: 91px;
}

#nav3 {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_ship_pay.jpg') no-repeat;
    width: 90px;
}

#nav3:hover {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_ship_pay_over.jpg') no-repeat;
    width: 90px;
}

Since we’re making our graphic rollover a background inside a link, the two most important things here are making sure the link is set to display: block and you’ll also need to define each link’s height and width to have the graphics show properly. Here, my menu had a uniform height but not so with the width. Depending on the graphics you use, this could be different.

Then your JQuery Image Navigation Rollover code:

$(document).ready(function() {
    // Click Event
    $('.nav a').click(function() {  
        // Grab value of id attribute
        var $id = $(this).prop('id');
        // Find the id dynamically and find the current bg image of the hover state
        var $hov = $('#' + $id + ':hover').css('background-image');
        // Set an inline style with the hover state's bg
        $('#' + $id).attr('style', 'background-image: ' + $hov).addClass('selected');

        // After selecting a new tab, iterate through prior tabs and remove their bg images
        $('.nav li').find('a').each(function() {
            if ($(this).prop('id') != $id ) {
                $(this).removeAttr('style').removeClass('selected');
            }
        });
    });
});

Basically we’re grabbing the ID of the link, pulling the :hover state and assigning it as an inline style for the clicked element. We then iterate through all links that don’t equal the clicked link and remove their inline style and class.

While there’s probably other ways this can be done, this was pretty simple and concise to me. Lastly, you can check out the working Demo in our JS Fiddle here.

This was tested and should work in JQuery 1.6 and above.