マウスを乗せると画像が変わるバナーの作り方

マウスを乗せる（オンマウス）すると画像が変わるバナーの作り方

オンマウス時の効果を利用します。

例えば、元画像を「画像A」、マウスを乗せた時の画像を「画像B」

とします。そうすると、画像のタグはこうなります。

<img src="画像AＵＲＬ" onmouseover="this.src='画像BＵＲＬ';" onmouseout="this.src='画像AＵＲＬ';" />

普通の画像リンクってこうですよね。

<a href="飛ばすURL"><img src="画像URL" alt="画像の説明" /></a>

そのIMG要素の所に最初のを入れちゃいます。

<a href="飛ばすURL"><img src="画像AＵＲＬ" onmouseover="this.src='画像BＵＲＬ';" onmouseout="this.src='画像AＵＲＬ';" /></a>

そうすれば、そのままで画像A、マウスが乗っかったときに画像Bが

表示するようなバナーが作れます。

実際にやってみましょう。

画像A

　

画像B

飛ばすURLをこのブログにしてみました。

するとこうなります。（マウスを乗せてみてください）

別窓表示にしたいなら、target="_blank"を入れればOKです。

飛ばすURLの後ろに、target="_blank"を挿入すれば別窓表示になります。

別窓表示する効果target="_blank"を挿入した最終的なタグはこれ。

<a href="飛ばすURL" target="_blank"><img src="画像AＵＲＬ" onmouseover="this.src='画像BＵＲＬ';" onmouseout="this.src='画像AＵＲＬ';" /></a>
別窓表示する効果をつけてみたバナー。


ペイントで画像の色を反転させて、オンマウスしたら画像が反転する
バナーにするだけで結構クリック率は上がりますよ。