Jquery Selecting image

Question

primarily, i'm new for Jquery.

I have images like that . What i want is that when user click image,it makes image bordered. User can select a number of images. It all must be bordered when selected. After button is clicked, i will have images id.

  <tr><img id="i will put value for db processing"src="urlofimage"</tr> &nbsp;

How can i do this?

Answer 1

Do you mean:

$.fn.hasBorder = function() {   
  if ((this.outerWidth() - this.innerWidth() > 0) ||  (this.outerHeight() - this.innerHeight() > 0)){
        return true;
    }
    else{
        return false;
    }
};
$(document).ready(function() {
  var selectedImgsArr = [];
   $("img").click(function() {

      if($(this).hasBorder()) {
          $(this).css("border", "");
          //you can remove the id from array if you need to
      }
      else {
         $(this).css("border", "1 px solid red");
         selectedImgsArr.push($(this).attr("id")); //something like this 
      }
   });
});

Answer 2

a simple example:

live example in JsBin

the styling:

ul { list-style: none; }
ul li { display: inline; } 
ul li img { border: 2px solid white; cursor: pointer; }
ul li img:hover,
ul li img.hover { border: 2px solid black; }

the javascript:

$(function() {

  $("img").click(function() {      
    $(this).toggleClass("hover");      
  });

  $("#btn").click(function() {      
    var imgs = $("img.hover").length;    
    alert('there are ' + imgs + ' images selected');        
  });

});

the result: