スタイルシートで画像のロールオーバー

■スタイルシートで画像のロールオーバー効果を出す

▼完成系▼

マウスを下の画像にかざすと、画像が入れ替わります。
この効果をロールオーバーといいます。

※マウスをかざしてみてください

早速スタイルシートで画像のロールオーバーにチャレンジしてみましょう！


　画像を2枚用意します

下記2つの画像を、画像作成ソフトで作成してみてください


●マウスをかざす前の画像（ロールオーバーしません）






●マウスをかざした後の画像（ロールオーバーしません）






画像を作成したらタグを挿入します

<div>の名前「roll」は後で好きな名前に
変更できますが、まずは！ソースをそのままコピーして
挿入してみてください


▼HTML部分です▼

（画像を表示させる部分）

▼スタイルシート部分▼

★上記ソースがうまく挿入できたら完成です！

※上記で、●の部分はあなたのホームページで使用する
画像のサイズを記入します。（width：画像の幅　height：画像の高さ）

※■の部分は、利用する画像ファイルのURLを記載します。
　 （上記では、fwというフォルダに保存されている、rollというpngファイル）　
roll2 →　マウスをかざすと・・・　
roll1　→　ロールオーバー★★


上記ソースの解説！

display:none　→　その要素がない状態にする