jquery - Redefine border of image no longer selected -

jquery - Redefine border of image no longer selected -

i've dived javascript , jquery please bare me!

i creating form elements images. when hovered over, there css rule creates thick border around selected image. true when image selected; leaves thick border.

the problem faced though when image clicked, whilst leaves thick border around right image, doesn't redefine borders around other previous selected images. (by redefine mean create translucent stop image moving about).

here's jsfiddle: http://jsfiddle.net/bewwf/ or may see code below.

html

<div class="grid_12 alpha" id="selection"> <input type="hidden" id="selsunlight" name="selsunlight" value=""/> <div class="grid_2 omega" style="margin-left: 8px"> <div align="center"><img src="images/details/any.png"/ id="anysun" name="anysun" onclick="selectsunlight('anysun')"/></div> <p id="image-text">any</p> </div> <div class="grid_2 alpha omega"> <div align="center"><img src="images/details/sunlight/full_light.png" id="fullsun" name="fullsun" onclick="selectsunlight('fullsun')"/></div> <p id="image-text">full sun</p> </div> <div class="grid_2 alpha omega"> <div align="center"><img src="images/details/sunlight/part_shade.png" id="partshade" name="partshade" onclick="selectsunlight('partshade')"/></div> <p id="image-text">part shade</p> </div> <div class="grid_2 alpha"> <div align="center"><img src="images/details/sunlight/full_shade.png" id="fullshade" name="fullshade" onclick="selectsunlight('fullshade')"/></div> <p id="image-text">full shade</p> </div> </div>

javascript

function selectsunlight(item) { $.each(['#anysun','#fullsun','#partshade','#fullshade'], function() { $(this).css('border', "3px solid #f5f5f5"); $(this).hover( function() { $(this).addclass('hover'); }, function() { $(this).removeclass('hover'); }); }); $('#'+item).css('border', "3px solid #a6be39"); $('#selsunlight').val(item); }

.hover defined #selection .hover {border: 3px solid #a6be39}

i've resolved problem after problem , after spending lengthy amount of time i've ran out of ideas regards problem. head suggests should work, evidently doesn't!

many thanks!

--

edit - confirm needs done:

1) user selects image 2) 1 time image selected, border image remains thick 3) other images must maintain hover effect, whereby border becomes thick , lean respectively 4) if image selected, border in step 2 reset, , new image takes on thick border

this image may create clearer: http://i48.tinypic.com/ei4f9t.png

i optimized code. since you're using css :hover, don't need utilize jquery hover border. added class="sun" each of images wouldn't need utilize $(".sun") instead of slower .each. utilize jquery's .click replace onclick , .prop name attribute clicked .sun. changed selected img border reddish demo. html:

<div id="selection"> <input type="hidden" id="selsunlight" name="selsunlight" value="" /> <img class="sun" src="http://jonline.me.uk/fbedder/images/details/any.png" id="anysun" name="anysun" /> <p id="image-text">any</p> <img class="sun" src="http://jonline.me.uk/fbedder/images/details/sunlight/full_light.png" id="fullsun" name="fullsun" /> <p id="image-text">full sun</p> <img class="sun" src="http://jonline.me.uk/fbedder/images/details/sunlight/part_shade.png" id="partshade" name="partshade" /> <p id="image-text">part shade</p> <img class="sun" src="http://jonline.me.uk/fbedder/images/details/sunlight/full_shade.png" id="fullshade" name="fullshade" /> <p id="image-text">full shade</p> </div>

css:

.sun {border: 3px solid #f5f5f5} .sun:hover {border: 3px solid #a6be39} .selected {border: 3px solid reddish !important}

jquery:

$(document).ready(function(){ $(".sun").click(function(){ $(".sun").removeclass("selected"); $(this).addclass("selected"); var item = $(this).prop("name"); $('#selsunlight').val(item); }); });

jsfiddle: http://jsfiddle.net/bewwf/2/

jquery html border