How to create a selection box with icons in HTML javascript?

Question

I want to create a dialog box to select a particular icon from a grid of icons .Like this:

I am using jQuery Impromptu dialogs for my other dialog usage .But I dont know how to make this thing .Please help I am new to this.

Answer 1

I guess you can just put a bunch of links in a container, and put an img inside it.

<div class="iconSelector">
    <a href="selecticon.php?icon=1" title="Select 'computer icon'"
       ><img src="computer.png" alt="computer icon"/></a>
    <a href="selecticon.php?icon=2" title="Select 'other icon'"
       ><img src="computer.png" alt="other icon"/></a>
    <a href="selecticon.php?icon=3" title="Select 'computer icon'"
       ><img src="computer.png" alt="computer icon"/></a>
  ...
</div>

Then, with a tiny bit of CSS you're there:

.iconSelector {
    display: inline-block;
    padding: 8px;
}
.iconSelector a img {
    width: 32px; 
    height: 32px;
}

Demo fiddle

If you like/need to, you can add some Javascript as well to handle the clicks.

$(function(){
    $('.iconSelector').on('click', 'a', function(e){
        e.preventDefault();
        alert($(this).attr('href') + ' was clicked');
    });
});

Demo fiddle