セレクトメニューの選択肢を画像にする「Image Select plugin with jQuery」

セレクトメニューは文字列でイメージしにくい時があります。
そんな時、画像で選択肢を見せてあげると、ユーザーにとってわかりやすいかもしれません。
jQueryプラグインのImageSelectでは、これを簡単に実現できます。

sponsors

使用方法

ImageSelectからファイル一式をダウンロード。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="imageselect.js"></script>
<script type="text/javascript">
$(function() {
	$('select[name=***]').ImageSelect({
		dropdownWidth:425, //幅指定
		dropdownHeight:100, //高さ指定
		backgroundColor:#FFFFFF, //背景色
		borderColor:#CCCCCC //枠線の色
	});
});
</script>
上記を記述したら、selectを下記のように書きます。

<select name="***">
	<!-- ***部分は上記js内と統一ください -->
	<option value="1">画像パス1</option>
	<option value="2">画像パス2</option>
	<option value="3">画像パス3</option>
	<option value="4">画像パス4</option>
</select>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors