Geek Answers Handbook

Highlight selected image in form - using jQuery?

I searched google for an answer and found nada, so it’s even very important to evaluate the link to a page showing how to do the following.

Basically, I have a form in which there are no images only

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

I want to be able to somehow highlight the image that the user has selected. Even just the outline around image 1 when the user clicks image 1 would be perfect.

I already use jquery in this project, so if there is a jquery solution, this would be the most convenient.

+6
jquery html image highlight forms
source share
5 answers

Under an accessible approach, it will be to stylize the labels of the radio buttons to behave like the choice of image:

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

And then CSS. As you can see, the radio stations themselves are hidden with opacity 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; }

Here is an example in action: http://jsfiddle.net/RH98R/

This has the added benefit of having no jQuery (or even javascript) dependency!

+13
source share

UPDATE: see bryanbraun answer . Its much better.

In HTML, <input type="image"> is just a submit button with an image as a face. I do not think you want. You probably need a list of actual images that, when clicked, sets the value of the hidden shape according to the value-value attribute. So your HTML should look something like this:

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

Then in your javascript you want to both select the image and set a hidden value, for example:

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

Finally, set some styles for the highlight class in your CSS file:

 img.highlighted { border: 2px solid blue; }
+7
source share

Clicking on each image will introduce a 1px border and a 10px uppercase letter, but ideally you should give them a class to target them: $(".imgs2higlight").bind()

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

Something like the following should work, you can make CSS style classes and change the style more easily though.

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

something like

CSS

 .selected { border: 1px solid black; }

JavaScript:

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

More articles:


All Articles