Webサイトでカテゴリを選択した際に画像を切り替える機能は、ユーザーの視覚的な理解を助け、操作体験を向上させます。この記事では、HTML、CSS、JavaScriptを使った基本的な実装方法をわかりやすく解説します。
HTML構造の準備
まず、カテゴリボタンと表示する画像の領域をHTMLで用意します。各ボタンにはdata属性で切り替える画像のパスを指定します。
具体例として、以下のようにボタンと画像タグを設定します：<button data-img='img1.jpg'>カテゴリ1</button>
<button data-img='img2.jpg'>カテゴリ2</button>
<img id='displayImg' src='img1.jpg' alt='画像表示'>
JavaScriptで画像切替処理
ボタンがクリックされた際に、表示画像のsrc属性を変更するスクリプトを追加します。イベントリスナーを使い、クリックされたボタンのdata-img属性を取得してimgタグに反映させます。
例:const buttons = document.querySelectorAll('button');
const displayImg = document.getElementById('displayImg');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
displayImg.src = btn.dataset.img;
});
});
CSSで見た目を整える
画像切替だけでなく、ボタンのスタイルや選択中のカテゴリをハイライトすることでユーザビリティが向上します。例えば、ボタンにクラスを追加して背景色を変えることができます。
例:button.active { background-color: #4CAF50; color: white; }
応用: 複数画像やアニメーションの追加
複数の画像やスライドショー形式に拡張する場合、配列で画像を管理して順番に切り替える方法や、フェードイン・フェードアウトなどのアニメーションをCSSやJavaScriptで追加する方法があります。
これにより、より動的で魅力的なカテゴリ切替表示が可能になります。
まとめ
カテゴリ選択で画像を切り替える基本は、HTMLでボタンと画像の構造を作り、JavaScriptでクリックイベントに応じてsrc属性を変更する方法です。CSSでスタイルを整え、アニメーションを追加すれば、よりリッチなユーザー体験が実現できます。ポイントは、data属性の活用、イベントリスナーによる画像切替、CSSによる視覚的補強です。
コメント