Highlight Selected Image in Form - with Jquery?

Question

I've searched Google for the answer and have found nada so even a link to a page showing how to do the following will be much appreciated.

Basically I have a form with nothing but images

<form>
<input type="image" src="image.jpg" value="image_value">
<input type="image" src="image2.jpg" value="image_value2">
</form>

I want to be be able to highlight in some way the image the user has selected. Even just an outline around image 1 when the user clicks image 1 would be perfect.

I already am using Jquery on this project so if there is a jquery solution it would be the handiest.

Answer 1

An accessible approach would be to style radio buttons labels to behave like an image select:

<form action="#" method="post">
    <input type="radio" class="radio" name="example" id="ex1" value="ex1" checked />
    <label for="ex1" class="label">Example 1</label>
    <input type="radio" class="radio" name="example" id="ex2" value="ex2" />
    <label for="ex2" class="label">Example 2</label>
</form>

And then the CSS. As you can see, the radios themselves are concealed with an opacity of 0:

.radio {
    opacity: 0;
    position: absolute;
}
.label {
    background: url(http://i.imgur.com/mW6xr2I.png);
    text-indent: -999em;
    border: 10px solid white;
    width: 126px;
    height: 126px;
    display: block;
    float: left;
    margin: 10px;
}
input[type="radio"]:checked + label {
    border: 10px solid orange;
}

Here's an example in action: http://jsfiddle.net/RH98R/

This has the added benefit of not having a dependency on jQuery (or even javascript for that matter)!