画像にマウスを合わせると、別の画像に切り替わる方法をお伝えします。
この方法は、「お申し込みはこちら」などのバナーを使うときに、とても効果的です。
画像にマウスを合わせて、別の画像に切り替われば（画像の色が変われば）、「この画像はリンクだ」ということが、分かりやすくなるからです。
バナーでこの方法を使うと、クリック率が高くなるので、ぜひ活用してください。
■ 画像にマウスを合わせると、別の画像に切り替わる方法の手順
手順１：画像を２つ用意する。
まずは、画像を２つ用意しましょう。
１つ目の画像は、「ホームページに表示させておく画像」です。
そして、２つ目の画像は、「マウスを合わせたときに表示される画像」です。
なお、ここでは、「ホームページに表示させておく画像」を gazou.gif というファイル名で保存して、
「マウスを合わせたときに表示される画像」を gazou-over.gif というファイル名で保存して、ご説明します。
手順２：下記のソースを記述する。
|
<img src="gazou.gif" onmouseover="this.src='gazou-over.gif'" onmouseout="this.src='gazou.gif'">
|
実現方法は、上記のソースを記述するだけです。
なお、「ホームページに表示させておく画像（gazou.gif）」と、「マウスを合わせたときに表示される画像（gazou-over.gif）」の指定を、それぞれ気をつけてください。
手順３：マウスを合わせて、画像が切り替わるか確認する。
画像にマウスを合わせて、画像が切り替わることを確認してみてくださいね。
■ 有効なのは、「お申し込みはこちら」のバナーを使うとき！
画像にマウスを合わせて、画像が切り替わったとしても、あまり意味はありません。
ただ、「お申し込みはこちら」などのバナーを、リンクとして使うときに、画像が切り替わると、とても効果的です。
たとえば、下記の「お申し込みはこちら」のバナーに、マウスを合わせてみてください。
画像の色が変わるため、「このバナーはリンクだ」ということが、分かりやすくなりますよね？
画像の切り替えは、バナーをリンクとして使うときに、とても有効ということです。
なお、実現方法は、下記のソースを記述します。
<a href="https://toretama.jp/" target="_blank">
<img src="gazou.gif" onmouseover="this.src='gazou-over.gif'" onmouseout="this.src='gazou.gif'">
</a>
|
先ほどのソースに、<a> タグを使って、画像をリンクとして表示するだけです。
なお、画像をリンクとして表示する方法は、ホームページのリンクと画像を表示させる方法 のページを確認してみてください。
ちなみに、画像の色を変えるには、「Jtrim」が最適です。
上記の画像も、私は「Jtrim」を使って、画像の色を変更しましたよ！
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
