Highlight Selected Image in Form - with Jquery?

I've searched Google for the answ开发者_如何学Cer 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.

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)!

UPDATE: Please see bryanbraun's answer. His is much better.

In HTML, <input type="image"> is just a submit button with an image as its face. I don't think that's what you want. You probably want a list of actual images, that when clicked, sets a hidden form value according to a "data-value" attribute. So your HTML should look something like this:

<form id="select-form">
    <img src="image.jpg" data-value="image_value">
    <img src="image2.jpg" data-value="image_value2">
    <input type="hidden" id="image-value" name="selected_image" value="">
</form>

Then in your javascript, you want to both highlight the image and set the hidden value, like this:

$('#select-form img').click(function() {
    // Set the form value
    $('#image-value').val($(this).attr('data-value'));

    // Unhighlight all the images
    $('#select-form img').removeClass('highlighted');

    // Highlight the newly selected image
    $(this).addClass('highlighted');
});

Finally, set some styles for the highlight class in your CSS file:

img.highlighted {
    border: 2px solid blue;
}

Something like the following should work, you could make the styles CSS classes and change the style more easily though.

$("input[type='image']")
    .focus(function() { $(this).css("border","solid 1px #f00"); })
    .blur(function() { $(this).css("border","0"); });

something like

CSS:

.selected { border: 1px solid black; }

javascript:

$(function() {
     $("input[type=image]").click(function(){ $(this).addClass('selected'); });
});

The following will give every image input a 1px border and 10px padding when clicked, but ideally you should give them a class to target them with like: $(".imgs2higlight").bind()

  $(document).ready(function() {
            $("input[type='image']").bind('click',function(e) {
e.preventDefault();
            $(this).css({padding : '10px', border: "1px solid blue"});
            })
            })