select要素のoption項目の内容を画像で表現する為のスクリプト・Image Picker

select要素のoptionを分かりやすく
表現する、というライブラリです。
選んだ項目にあわせて設定した画像
が表示、選んだoptionに連動しま
す。これは結構いいアイデアじゃ
無いかなと。

select要素のユーザビリティ向上、みたいなスクリプトです。jQueryに依存します。

Image Picker

こんなやつです。選ぶと画像にも青い枠が付く、みたいなの。画像はマークアップせず、option要素にカスタムデータ属性を与える事で実装します。

Sample

選択すると画像の選択箇所も連動します。

コード

<script src="jquery.min.js" type="text/javascript"></script>
<script src="image-picker.min.js" type="text/javascript"></script>

本体とプラグインを読み込んで

$(".foo").imagepicker({hide_select: false, show_label: true});

セッティング。

<select class="foo">
        <option data-img-src='bar.jpg' value='1'>Cute Kitten 1</option>
        <option data-img-src='hoge.jpg' value='2'>Cute Kitten 2</option>
        <option data-img-src='piyo.jpg' value='3'>Cute Kitten 3</option>
</select>

連動させる画像はoptionにカスタムデータ属性を与えてパスを指定します。

ちょっと面白いアイデア。

Image Picker