【レイアウト構成】番外編:複数画像をホバーで切り替え

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

コンテンツの横幅を設定するため、全体をdivタグで囲みます。

メイン画像
divタグで囲み、jQueryで要素を指定するためのID名をつけておきます。
※クラス名でもよいですが、クラス名は同一ページ内で複数回使用できるため、特定の要素を指定したい場合はID名を設定しておくのがおすすめです。
サムネイル画像
ul、liタグで記述して、Flexboxで横並びに配置します。
こちらもjQueryで要素を指定するためのID名をつけておきます。
ホバーの画像切り替え
サムネイルがホバーされた際の処理は、jQueryのmouseoverイベントを使用します。メイン画像をfadeOutで非表示にしてから、attr関数でメイン画像のsrcを変更します。その後、fadeInでメイン画像を表示します。

リクエスト受付中

いつもCodestepを利用いただき誠にありがとうございます。
利用してみて、「分かりづらい」「ここの解説を追加してほしい」「こんな学習内容があればいいのに」等、リクエストがありましたらどしどしお送りください。
また学習コンテンツ内に不備や誤りがございましたらこちらからご連絡ください。

アンケートフォームはこちら

コーディング練習メニューに戻る

他のコーディング練習にチャレンジする

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習