Question

The code below is what I have but unfortunately it’s not doing anything. Previously I had a section working for swapping images but it was much simpler code… If there is a easier way to do it I’m all ears.

To recap what I am trying to accomplish is:

Land on home page > Nothing selected in nav
Hover over – image swaps to selected state
On click image is swapped to selected state.

Thanks for any help!

The other problem I am having is that the files I was given by the artist have the text in the image. I have two different images one in the selected state with the text and one in the inactive state with the text. So I can’t put the text above it.

Jquery

var menu = {
init: function () {

    $('.nav-image').hover(function () {
        if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") == -1) {
            var src = $(this).attr('src').replace("_off.png", "_on.png");
            $(this).attr('src', src);
        }
    },

        function () {

            if ((page == "index" && $(this).attr('id') != "index-nav") || (page == "about" && $(this).attr('id') != "about-nav") || (page == "portfolio" && $(this).attr('id') != "portfolio-nav") || (page == "blog" && $(this).attr('id') != "blog-nav") || (page == "contact" && $(this).attr('id') != "contact-nav") || page == "index") {
                if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") >= 0) {
                    var src = $(this).attr('src').replace("_on.png", "_off.png");
                    $(this).attr('src', src);
                }
            }
        });

}}

HTML

<div class="menu">
    <div style="float: left; hieght: 45px; width: 193px;"><img src="images/nav/left_end.png" class="nav-image"></div>
    <div style="float: left; height: 45px; width: 73px;"><a href="index.php"><img src="images/nav/home_off.png" class="nav-image" id="index-nav"></a></div>
    <div style="float: left; height: 45px; width: 80px;"><a href="about.php"><img src="images/nav/about_off.png" class="nav-image" id="about-nav"></a></div>
    <div style="float: left; height: 45px; width: 112px;"><a href="portfolio.php"><img src="images/nav/portfolio_off.png" class="nav-image" id="portfolio-nav"></a></div>
    <div style="float: left; height: 45px; width: 69px;"><a href="http://info.arkmediainc.com/blog"><img src="images/nav/blog_off.png" class="nav-image" id="blog-nav"></a></div>
    <div style="float: left; height: 45px; width: 98px;"><a href="http://info.arkmediainc.com/contact-us"><img src="images/nav/contact_off.png" class="nav-image" id="contact-nav"></a></div>
    <div style="float: left; height: 45px; width: 35px;"><img src="images/nav/right_end.png"></div>
</div>

Answer 1

You could have CSS do it for you.

Each div could be a background image of any menu item, which could also allow you to have text over it.

Then use code similar to this sample.

So you could have cleaner code, for each link :

<div class="nav home"><a href="index.php">Home</a></div>

<script>
jQuery('.nav').click(function() {
    jQuery(this).css("background-image",jQuery(this).css("background-image").replace("on","clicked");
});
<script>

<style>
.nav {
    float: left; 
    height: 45px; 
    width: 73px;;
}

.home {
    background-image: url("images/nav/home_off.png");
    }

.home:hover {
    background-image: url("images/nav/home_on.png");
    }

</style>