突出显示窗体中的选定图像 - 使用jQuery？

Question

我搜索了谷歌的答案，并找到了纳达，所以即使链接到一个页面显示如何做以下将不胜感激。

基本上我有什么形式，但图像

<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

的accessible方法是风格单选按钮标签的行为像图片中进行选择：

<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

下点击时会给每个图像输入1px的边框和10px的填充，但最好你应该给他们一类像，对其进行定位：$(".imgs2higlight").bind()

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

Answer 3

类似下面应该工作，你可以制作CSS类的样式，并且更容易改变样式。

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

Answer 4

像

CSS：

.selected { border: 1px solid black; } 

的javascript：

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

Answer 5

UPDATE：请参阅bryanbraun's answer。他好多了。

---

在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文件中的亮点类：

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