如何用HTML中的圖標創建一個選擇框？

Question

我想創建一個對話框，從圖標。像這樣的網格選擇特定的圖標：

我使用jQuery即興對話對我的其他對話框的使用。但我不知道如何做這件事請幫助我對此感到陌生。

Answer 1

我想你可以把一堆鏈接放在一個容器中，並在其中放置一個img。

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

然後，用CSS的一點點你在那裏：

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

Demo fiddle

如果你喜歡/需要，你可以添加一些JavaScript，以及處理點擊。

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

Demo fiddle