Implementing a graphical select list using icons via jQuery or other

Question

I am implementing an HTML form. For one of the fields (weather) the user must choose one of a set of options (sunny, cloudy, rainy, etc.)

So basically I'm looking for a nice replacement for <select> or <radio> that provides a series of images (that I will provide) for the user to select from. I'll create dulled/greyed versions of each image that represent unselected items.

I've found loads of jQuery rating controls that provide this, but nothing that quite does what I want (probably because I don't really know what it's called and therefore can't Google it.)

Oh and if the user doesn't have JavaScript enabled, it should degrade nicely to provide standard <select> or <radio> options.

Answer 1

You could roll your own pretty easily. Start with markup like so:

<fieldset>
    <input type="radio" name="weather" value="sunny" />
    <input type="radio" name="weather" value="cloudy" />
    <input type="radio" name="weather" value="rainy" />
    <input type="radio" name="weather" value="class-3-kill-storm" />
</fieldset>

Without javascript enabled, the users will get the above (you'd probably want to add some label elements so people knew what they were clicking ;). Next, loop through all of them and create the <a> elements you'll need for your icons:

$('input[name=weather]').each(function() {
    var radio = $(this);
    radio.css({display: 'none'});

    var icon = $('<a class="icon ' + this.value + '"></a>');
    icon.click(function(e) {
        // stop default link click behaviour
        e.preventDefault();

        // unmark any previously selected image and mark clicked selected
        icon.siblings('.icon').removeClass('selected');
        icon.addClass('selected');

        // set associated radio button's value
        radio.attr('checked', 'true');
    });
    $(this).parent().append(icon);
});

The reason I'm using an <a> is because IE will properly respect the :hover CSS pseudoclass. Also on that note, I'm using CSS spriting so you'd combine your greyed and full colour images into one 40px tall image with the grey version at the top.

The css for the <a> would look something like:

a.icon {
    float: left;

    /* width and height of your weather icons */
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
    background-position: 0 0;
}

a.selected,
a:hover.icon {
    background-position: 0 -20px;
}

.sunny{
    background-image: url(sunny.png);
}

.rainy {
    background-image: url(rainy.png);
}

/* remaining weather styles */ 

You can see a version using background colours in action here.