画像をセレクトボックスで切り替える方法
画像をセレクトボックスで切り替える方法を紹介します。このサンプルでは、セレクトボックスから表示したい画像を選択すると、選択した内容に合わせて画像が切り替わります。複数の画像を並べて表示する必要がなく、ひとつの表示エリアで画像を切り替えられるため、限られたスペースでも複数の画像を見せることができます。
商品の種類やカラーごとの画像、場所やカテゴリーごとの写真、複数パターンのデザイン確認など、選択した項目に対応する画像を表示したい場面に利用できます。セレクトボックスを変更するとJavaScriptで選択された値を取得し、表示中の画像をその場で切り替えるため、ページを再読み込みする必要はありません。
HTMLではセレクトボックスの項目や表示する画像を変更でき、CSSでは画像表示エリアの横幅、余白、枠線、角丸、セレクトボックスのデザインなどを調整できます。JavaScriptでは各選択肢と画像を対応させているため、画像や選択肢を用途に合わせて変更できます。シンプルな構成なので、画像切り替え機能を導入したい場合のサンプルとして利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマホ表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>画像をセレクトボックスで切り替える</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 画像切り替え全体 -->
<div class="image-select_demo">
<!-- 画像表示エリア -->
<div class="image-select_image-wrap">
<!--
初期表示画像
sample/images/ フォルダへ画像を配置し、
下記を実際の画像ファイル名へ変更してください。
-->
<img
id="image-select-image"
class="image-select_image"
src="images/image1.png"
alt="image1">
</div>
<!-- セレクトボックスエリア -->
<div class="image-select_control">
<!-- ラベル -->
<label class="image-select_label" for="image-select-box">
画像セレクト
</label>
<!-- CSSで矢印を表示するためのラッパー -->
<div class="image-select_select-wrap">
<!-- 画像を選択するセレクトボックス -->
<select id="image-select-box" class="image-select_box">
<!-- 1枚目の画像 -->
<option
value="images/image1.png"
data-alt="image1">
image1
</option>
<!-- 2枚目の画像 -->
<option
value="images/image2.png"
data-alt="image2">
image2
</option>
<!-- 3枚目の画像 -->
<option
value="images/image3.png"
data-alt="image3">
image3
</option>
</select>
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは表示する画像とセレクトボックスを配置し、CSSでは画像表示エリアやセレクトボックスのデザインを設定します。JavaScriptではセレクトボックスで選択された項目を取得し、表示する画像を切り替えます。使用する画像は利用者が用意し、imagesフォルダへ配置します。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
└── image3.png
各ファイルの役割
index.htmlは画像表示エリアとセレクトボックスを構成するファイルです。初期表示する画像、セレクトボックスのラベル、各optionの表示内容、画像ファイルのパス、代替テキストを変更できます。
style.cssは画像表示エリアとセレクトボックスのデザインを設定するファイルです。全体の横幅、画像の高さ、余白、枠線、角丸、影、文字サイズ、セレクトボックスの色、CSSで作成した矢印などを変更できます。
script.jsはセレクトボックスで選択された内容に合わせて画像を切り替えるファイルです。選択中のoptionから画像ファイルのパスと代替テキストを取得し、表示中の画像へ反映します。
imagesフォルダには切り替えて表示する画像を配置します。このサンプルではimage1.png、image2.png、image3.pngを使用する設定になっています。画像ファイルは利用者自身で用意してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成します。利用する3枚の画像をimage1.png、image2.png、image3.pngというファイル名でimagesフォルダへ配置してください。配置後にsample/index.htmlをブラウザで開くと表示できます。セレクトボックスからimage1、image2、image3を選択すると、選択した項目に対応する画像へ切り替わります。
カスタマイズできる内容
index.htmlでは初期表示する画像、セレクトボックスに表示する項目名、画像ファイルのパス、代替テキストを変更できます。別の画像を使用する場合は、imagesフォルダへ画像を配置し、src、各optionのvalue、data-altを使用する画像に合わせて変更してください。
style.cssでは全体の最大横幅、画像の高さ、背景色、枠線、角丸、影、画像とセレクトボックスの間隔、文字サイズ、セレクトボックスの内側余白、フォーカス時の色や影、矢印の位置やサイズを変更できます。
数値調整
style.css
max-width:700px;
画像切り替え全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
height:400px;
PC表示時の画像の高さです。値を大きくすると画像表示エリアが高くなり、小さくすると低くなります。
border-radius:18px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
margin-top:24px;
画像とセレクトボックスエリアの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
margin-bottom:8px;
「画像セレクト」のラベルとセレクトボックスの間隔です。値を大きくすると間隔が広がります。
padding:12px 52px 12px 14px;
セレクトボックスの内側余白です。右側の52pxは矢印を表示するための余白として使用しています。
border:2px solid #d1d5db;
セレクトボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
セレクトボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
セレクトボックスとラベルで使用している文字サイズです。値を大きくすると文字が大きくなります。
right:20px;
CSSで作成した下向き矢印の右端からの位置です。値を大きくすると矢印が左へ移動し、小さくすると右へ移動します。
width:10px;、height:10px;
下向き矢印のサイズです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。
transition: border-color .3s ease, box-shadow .3s ease;
セレクトボックスをフォーカスしたときに枠線と影が切り替わる時間です。.3sは0.3秒を表し、値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px rgba(37,99,235,.12);
セレクトボックスをフォーカスしたときの外側の強調表示です。4pxを大きくすると強調範囲が広がり、小さくすると狭くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体の横幅が縮小されます。また、600px以下ではメディアクエリによって画像の高さを260pxへ変更します。スマートフォン・タブレット・PCで利用できます。
コメント