何度か来てくれている人にはお馴染みのこれ↓ですが、初めて見る人はボタンにカーソルを乗せてみてね。
マウスを乗せると画像が変わるでしょう？
ロールオーバーと言います。
クリックしてくれる人にお礼が言いたくて、「ありがとう」の言葉が出るようにしました。
ボタンとして機能しますので、クリックすると、人気ブログランキングへ飛びます。クリックしてみてね。
ロールオーバーにする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/
ゆかいで楽しい、犬・猫・かわいい動物や季節の素材がいっぱいの素材屋さん。
↓参考になったら、今日もぜひクリックで応援してね！↓
