突出顯示窗體中的選定圖像 - 使用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; 
}