प्रपत्र में चयनित छवि को हाइलाइट करें - Jquery के साथ?

Question

मैंने Google के उत्तर के लिए खोज की है और मुझे नाडा मिला है, इसलिए एक पृष्ठ के लिंक को भी दिखाया गया है कि निम्नलिखित कैसे करें, इसकी सराहना की जाएगी।

असल में मैं कुछ भी नहीं के साथ एक रूप है, लेकिन छवियों

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

और फिर सीएसएस।

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

यहाँ कार्रवाई में एक उदाहरण है:: आप देख सकते हैं, रेडियो खुद को 0 के एक अस्पष्टता के साथ छुपा रहे हैं http://jsfiddle.net/RH98R/

यह jQuery (या यहां तक ​​कि जावास्क्रिप्ट पर निर्भरता नहीं होने के अतिरिक्त लाभ है उस बात के लिए)!

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

तरह निम्नलिखित काम करना चाहिए, आप स्टाइल सीएसएस कक्षाएं बना सकते हैं और स्टाइल को अधिक आसानी से बदल सकते हैं।

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

Answer 4

तरह

सीएसएस कुछ:

.selected { border: 1px solid black; } 

जावास्क्रिप्ट:

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

Answer 5

अद्यतन: कृपया bryanbraun's answer देखते हैं। उसका बहुत बेहतर है।

---

HTML में, <input type="image"> सिर्फ एक अपने चेहरे के रूप में एक छवि के साथ सबमिट बटन है। मुझे नहीं लगता कि आप यही चाहते हैं। आप शायद वास्तविक छवियों की एक सूची चाहते हैं, जो क्लिक किए जाने पर, "डेटा-वैल्यू" विशेषता के अनुसार एक छिपी हुई फॉर्म मान सेट करें। तो अपने HTML कुछ इस तरह दिखना चाहिए:

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

अंत में, के लिए कुछ शैलियों सेट:

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

फिर अपने जावास्क्रिप्ट में, आप दोनों की छवि को उजागर करना और छिपा मूल्य निर्धारित करते हैं, इस तरह चाहते हैं अपने सीएसएस फ़ाइल में उजागर वर्ग:

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