Question

I’ve got a sample navigation list with images as buttons. There are two additional states for the buttons for when the user hovers over the button and when the mouse is clicked. Each button has the same naming convention, so for the back button there will be “back.jpg”, “back_over.jpg”, and “back_down.jpg”. Since there will be several buttons on a page, my goal is to get the path of the selected image’s source, and then just modify it by appending/removing the appropriate part of the path.

I have a working example, however I feel it could be more elegant. For example, I’m pretty sure it’s possible just to store each of the 3 image paths as variables and pass them in somehow. But when I tried that method, the img src wouldn’t append or remove correctly. I also know this is possible with CSS, which I have already done. This is mainly to increase my understanding of jQuery.

    $(document).ready(function() {

        $('li > img').bind('mouseenter mousedown mouseup mouseleave click', function(event) {

            var overImgSrc = $(this).attr('src').match(/[^\.]+/) + '_over.jpg';
            var downImgSrc = $(this).attr('src').replace('_over.jpg', '_down.jpg');
            var upImgSrc = $(this).attr('src').replace('_down.jpg', '_over.jpg');
            var outImgSrc = $(this).attr('src').replace('_over.jpg', '.jpg');

            var evtType = event.type;

            switch (evtType) {
                case 'mouseenter':
                $(this).attr('src', overImgSrc);
                break;

                case 'mousedown':
                $(this).attr('src', downImgSrc);
                break;

                case 'mouseup':
                $(this).attr('src', upImgSrc);
                break;

                case 'mouseleave':
                    if ($(this).attr('src', downImgSrc)) {
                        var downOutImgSrc = $(this).attr('src').replace('_down.jpg', '.jpg');
                        $(this).attr('src', downOutImgSrc);
                    }
                    else {
                        $(this).attr('src', outImgSrc);
                    }
                break;

                case 'click':
                alert("Yowza!");
                break;

                default:
                break;
            }
        });
    });

HTML

<ul id="nav">
        <li><img src="images/Back.jpg"></li>
        <li><img src="images/Next.jpg"></li>
</ul>

Answer 1

Try this out:

$(document).ready(function() {
    $('li > img').bind('mouseenter mousedown mouseup mouseleave click', function(event) {
        var images = {
            'mouseenter' : '_over.jpg',
            'mousedown'  : '_down.jpg',
            'mouseup'    : '_over.jpg',
            'mouseleave' : '.jpg',
        };

        //Store the original source without the extension.
        if (this.originalSource == undefined) {
            this.originalSource = this.src.substring(0, this.src.lastIndexOf('.'));
        }

        var evtType = event.type;

        //Append the affector.
        if (evtType in images) {
            this.src = this.originalSource + images[evtType];
        }

        //Handle your click event. (left the switch event in case you want to do something else with other events)
        switch (evtType) {
        case 'click':
            alert("Yowza!");
            break;
        default:
        }
    });
});