突出显示表单中的选定图像 - 使用Jquery？

Question

我搜索了谷歌的答案,并找到了nada,所以即使是一个页面的链接显示如何做以下将非常感激.

基本上我有一个只有图像的形式

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

我希望能够以某种方式突出显示用户选择的图像.当用户点击图像1时,即使只是图像1周围的轮廓也是完美的.

我已经在这个项目上使用Jquery了,所以如果有一个jquery解决方案,它将是最方便的.

Answer 1

一种可访问的方法是将单选按钮标签设置为像图像选择一样:

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

然后是CSS.如您所见,无线电本身隐藏的不透明度为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;
}

以下是一个实例:http://jsfiddle.net/RH98R/

这有一个额外的好处,就是不依赖于jQuery(甚至是javascript)!

Answer 2

更新:请参阅bryanbraun的回答.他的好多了.

在HTML中,<input type="image">它只是一个以图像为面的提交按钮.我不认为这就是你想要的.您可能需要一个实际图像列表,单击该列表时,会根据"数据值"属性设置隐藏的表单值.所以你的HTML应该是这样的:

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

然后在你的javascript中,你想要突出显示图像并设置隐藏值,如下所示:

$('#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');
});

最后,为CSS文件中的highlight类设置一些样式:

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