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

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

使用方法 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>


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

sponsors

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

記事作成:
記事URL:

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