突出显示表单中的选定图像 - 使用Jquery？ [英] Highlight Selected Image in Form - with Jquery?

问题描述

我搜索了Google的答案并找到了nada，所以即使是指向如何执行以下操作的页面的链接也会非常感激。

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>

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

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.

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

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>

然后是CSS。如您所见，无线电本身隐藏的不透明度为0：

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

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

这样做的另一个好处是没有依赖于jQuery（甚至是javascript）！

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

这篇关于突出显示表单中的选定图像 - 使用Jquery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！