アカハヤの技術ブログ

クズと天才は紙一重 twitter:@akahaya719

セレクトボックスで画像を選べるようにする

セレクトボックスで画像が選べるようにします。

 

セレクトボックスとは、コレ

 

今回はセレクト時に画像が表示されるようにします。

 

こちらに、CSS,JavaScriptをまとめてあります。

GitHub - nakajimakenta/ImageSelect

CSS,JavaScriptを習得し、

index.htmlのheadの部分に以下を追加。

 

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="imageselect.js"></script>
<link href="imageselect.css" media="screen" rel="stylesheet" type="text/css" />

 

その後、body内で以下を記述します。

<body>
<select name="logo">
<option value="1">画像パス</option>
<option value="2">画像パス</option>
<option value="3">画像パス</option>
<option value="4">画像パス</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('select[name=logo]').ImageSelect({dropdownWidth:425});
});

</script>
</body>

画像のパスは適当に入れてください。

これで完成です。

こんな感じになります。

f:id:akahaya_719:20170130020442p:plain