よくボタンやバナーなどでマウスポインターが画像と重なると、他の画像に切り替わったりするのを見たことありませんか？
この方法、マウスオーバーやロールオーバーと呼ばれています。
画像デザインが変わることでよりボタンやバナーがより目立つようになります。
そうなると、クリック率も自然と上がりますので購入やお申し込みボタンなどにロールオーバーを使うことが多く見られます。
今回はコピペでも使える方法をご紹介したいと思います。
ロールオーバーにはonmouseを使う
実はこのロールオーバーはCSSを使用しなくてもHTMLのみで実装可能なんです。
だから、コピペで簡単に出来るので是非使ってみてください。
コードは下記のような記述になります。
以上になります。
特に気をつけて欲しいのが、マウスが画像から離れた時のに表示する画像の設定です。
この部分を元の画像に戻すように設定するのを忘れないでください。（他の画像に切り替える時は別です）
これを実装すると下記のようになります。
弊社のロゴが白と黒に切り替わるかと思います。
もちろんこの画像にリンクを貼り付けてクリックすると飛ばすことも可能です。
リンクについては下記の記事をご覧ください。
マウスオーバーでクリック率アップを目指そう！
いかがでしたでしょうか？
ちょっと難しそうと感じることでも、意外と簡単に出来るんです。
でも、簡単と時間がかからないはイコールではありません。
「コピペでって言われても面倒臭いな〜」
「画像URlってなに？」
そんな時はWEBの便利屋Lallapallooza（ララパルーザ）にお任せ下さい！
3,000円から設置可能です！
バナー画像作成も込みの場合は6,000円から承っています。
下記のお申し込みページにて、ご相談・ご依頼の受付を行っております。
お申し込み後24時間以内に、お見積りと決済リンクをご連絡させていただきます。