Multi-Image

by JQ Purfect

HTML

<img id="1" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /><img id="2" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /><img id="3" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /><img id="4" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /><img id="5" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /><img id="6" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /><img id="7" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /><img id="8" src='//cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />

<br /><br />
Selected IDs <div id="result"></div>

CSS

body {
    font-family: verdana;
    font-size: 10pt;
}

img{border:solid 1px #ddd; margin:10px;}
.selected{
    border:solid 1px red;
    background: #ddd;
}

JavaScript

$('img').click(function(){
    //$('.selected').removeClass('selected');
    $(this).toggleClass('selected');
    $("#result").append($(this).attr("id"));
});

$( "img" ).dblclick(function() {
  alert( "Ahhhh you DClicked it..." );
});