マウスオーバーで画像を切り替える方法

自分用の備忘録です。

マウスオーバー(マウスカーソルを重ねる)で画像を切り替える方法は何通りかあるようですが、HTMLによって切り替える方法です。

通常、FC2ブログの編集画面で画像を張り付けると下記のように記述される。

<img src="画像のURL" alt="画像タイトル" border="0" width="***" height="***" />

マウスオーバーで画像を切り替える場合、下記のように記述する。

<img src="画像のURL" alt="画像タイトル" border="0" width="***" height="***" onmouseover="this.src='切り替える画像のURL';" onmouseout="this.src='元の画像のURL';" />

つまり、 /> の前に下記を付け足せばよい。

コピペ用

onmouseover="this.src='';" onmouseout="this.src='';"

※ this.src=' ' 部分に画像URLを記入すること

img src="画像のURL" と onmouseout="this.src='元の画像のURL';" はどちらも同じ画像のURLとなる。

サンプル
エボリアヌーメ v101

ソースコード抜粋
<img src="http://blog-imgs-60.fc2.com/k/u/m/kumarajyu/20130622011546250s.jpg" alt="" border="0" width="297" height="93" onmouseover="this.src='http://blog-imgs-60.fc2.com/k/u/m/kumarajyu/20130622011549f2cs.jpg';" onmouseout="this.src='http://blog-imgs-60.fc2.com/k/u/m/kumarajyu/20130622011546250s.jpg';" />

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

No title
夏真っ盛り!というような画像に!!
迫力がとてもツボです。
以前から面白くて切り替えては、楽しんでおりましたが、こうなると秋や冬も期待していてもよろしいのでしょうか!?
マリー さんへ
夏を意識して作ったわけではないですが、偶然にも今の季節と合致しましたww
今回はインパクトの強弱・対比を意識してみましたが、気に入っていただけたようで嬉しいです。

季節ごとに作り替えるという予定ではなかったのですが、良い素材があったら作ろうかと思います(^-^)

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。