カーソルを乗せると画像が変わる−ロールオーバー

いつもクリックしてくれてありがとう。
何度か来てくれている人にはお馴染みのこれ↓ですが、初めて見る人はボタンにカーソルを乗せてみてね。

マウスを乗せると画像が変わるでしょう？
ロールオーバーと言います。

クリックしてくれる人にお礼が言いたくて、「ありがとう」の言葉が出るようにしました。
ボタンとして機能しますので、クリックすると、人気ブログランキングへ飛びます。クリックしてみてね。

ロールオーバーにするIMGタグは、次のように書きます。

<IMG src="最初に表示される画像のURL" border=0
onMouseOver=this.src='カーソルを乗せたときの画像のURL'
onMouseOut=this.src='カーソルを離したときの画像のURL'>

リンクするボタンにするには、<a href="リンク先のURL"></a> で囲えばＯＫ。

<a href="リンク先のURL">
<IMG src="最初に表示される画像のURL" border=0
onMouseOver=this.src='カーソルを乗せたときの画像のURL'
onMouseOut=this.src='カーソルを離したときの画像のURL'>
</a>

という具合です。


カーソルを乗せないと、ロールオーバーになっているかどうかはわからないから、ロールオーバーはユーザーにとってあまり意味がないと指摘する人もいます。

それは確かにそうですね。だから、見えなくちゃいけないものに使うのは、良くないでしょう。カーソルを乗せないと「カートに入れる」という文字が見えないボタンなんて、意味ないですものね。

でも、リンク文字やメニューバーにカーソルを乗せると色が変わるというのは、もはや定番になっていると思うんです。
それに、ボタンでも色が変わると「カーソルがちゃんと乗ってる」という感じがするの、私だけじゃないんじゃないかな。
例えば、こんな感じ。左右どちらのボタンが押したくなりますか？

　　　　　　　　

※どちらのボタンも、この素材を配布されているwebデザイナーが作るフリーホームページ素材にリンクしてあります。


楽しいアクセントにもなりますから、素敵な使い方を考えてみてくださいね。
それでは、楽しい使い方の例をご紹介♪
画像の上にカーソルを乗せてみてくださいね。（リンクはしていません）

	恐怖の体重測定〜
	いらっしゃ〜い。 待ってたよ〜♪
	お座り！ お利口だね♪

［今回お世話になったサイト・ブログ]

• webデザイナーが作るフリーホームページ素材
  http://sozai.livedoor.biz/
  クールで使いやすい素材がたくさんです。
  
• 今日もわんパグ
  http://www5.ocn.ne.jp/~wanpagu/
  ゆかいで楽しい、犬・猫・かわいい動物や季節の素材がいっぱいの素材屋さん。

↓参考になったら、今日もぜひクリックで応援してね！↓

Comments

丁度HPを作っていた最中でとても為になりました！
是非是非色の変わるボタン作ります！

Posted by crowder at 2009年06月15日 16:39

◆crowderさん
いらっしゃいませ♪
参考になって、とても嬉しいです。
たとえボタン一つでも、自分のホームページを彩るパーツですから、自分好みに作れると、楽しさが増しますよね！
いーっぱい楽しんでくださいね♪

Posted by もも＠管理人 at 2009年06月17日 18:55

以前この記事にいただいたコメントが、どういうわけか表示されてません。
なぜー？(/□≦､)
消したわけじゃないんです。
ホントになんでだろう？

Posted by もも＠管理人 at 2009年06月17日 18:57