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

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



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

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

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

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

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

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

</a>

という具合です。


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

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

でも、リンク文字やメニューバーにカーソルを乗せると色が変わるというのは、もはや定番になっていると思うんです。
それに、ボタンでも色が変わると「カーソルがちゃんと乗ってる」という感じがするの、私だけじゃないんじゃないかな。

例えば、こんな感じ。左右どちらのボタンが押したくなりますか?

クリック!        

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


楽しいアクセントにもなりますから、素敵な使い方を考えてみてくださいね。


SPONSORED LINK




それでは、楽しい使い方の例をご紹介♪

画像の上にカーソルを乗せてみてくださいね。マスウオーバーでのちょっとしたお遊びです。
(リンクはしていません)





恐怖の体重測定~



いらっしゃ~い。
待ってたよ~♪



お座り!
お利口だね♪


他にもきっと楽しい使い方があるはず。
見つけたら、私にも教えて下さいねー!



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


この記事へのコメントが 12 件あります

  • crowder

    丁度HPを作っていた最中でとても為になりました!
    是非是非色の変わるボタン作ります!
    2009年06月15日
  • もも@管理人

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

    以前この記事にいただいたコメントが、どういうわけか表示されてません。
    なぜー?(/□≦、)
    消したわけじゃないんです。
    ホントになんでだろう?
    2009年06月17日
  • エム

    こんにちは。
    画像が変わるタグを使いたくてここにお邪魔しました。
    ほかのサイトで見たものだと「かなり長い」のと「Java」をつかっていました。
    ちょっと断念しました。
    ももさんのタグは簡単ですね。あと説明がわかりやすかったです。
    でも使ってみたのですが、画像が変わらないw
    どうしてでしょう?
    おそらく見てもらえないと思いますが一応アドレスつけておきます。
    左側の「ブログへ飛ぶ」「メール」の画像です。
    変わってなかったらまだ、できてないということです。

    まぁ、もいちど頑張ってみます!ありがとう。
    2009年09月28日
  • もも@管理人

    ◆エムさん
    こんにちは。
    拝見しましたよ。
    左サイドのメールのアイコンなどのことでしょうか?
    メールのアイコンはスタイルシートで指定されているので、もしかしたら背景として指定されているかもしれません。
    この記事の方法は、普通に画像を挿入した場合の方法なので、全然違う話なんですね。
    ブログの画像(正方形の黒っぽいもの)はちゃんとできてるので、成功ですね?^^
    2009年09月29日
  • エム

    こんにちは。
    成功しました。なので報告に来ました。
    観てもらえたということ大変感謝しています。
    忙しい中ほんとうにありがとうございました。
    その後色々試したところ成功しました。
    もっと自分で努力しないとって反省している次第です。

    「報告」

    *ブログ 左サイド、黒い正方形の部分。
    (成功しました。)^^

    *同じく、左サイド、メール部分。
    (ここは、画像リンクタグしかできないスペースと思いました。メールの画像は自分の画像です。ですので正方形の入れた同じスペースに移動すれば出来ると思いました)(>_<)

    *プロフィールルームの 黒い正方形の部分。失敗です。
    (この場所は「タグを使えます」と明記されてたのですが、もしかしたら画像が変わるタグが使えない場所かもしれません。元の画像表示とリンクはうまくいきましたが、それより後方部分の「乗せたとき、離れたとき」のタグがそのまま文字ででてきちゃいました)なので諦めます。(T_T)


    そもそも、ももさんのここのブログサイトと自分のサイトが違うので、軽々しく質問したことをほんとうに反省しております。
    こんな初心者にほんとうに暖かいご指導ありがとうございました(T_T)

    ちなみに7月からブログをやりだしたばかりで、まだまだ青二才です。しかもPCを持っていないので。「PC」からではなく「PS3」からブログを作っています^^
    大変ですが頑張ってゆきます。

    ももさんも頑張ってください。
    また色々と技を勉強しにお邪魔します。
    2009年09月30日
  • もも@管理人

    ◆エムさん
    報告ありがとうございます。(^_^)/
    みな、違う環境で作ったり見たりしていますね。
    それにしても、PS3からのブログライフ…!
    すごいなー。そういう知人はいないので、違う世界を垣間見たみたいで興味深いです♪
    ひとつできたのなら、また次のひとつはできるようになりますよ。
    次第にいろいろな技を吸収していって、ブログを自分の色に育てる楽しみを味わってくださいね!
    2009年10月01日
  • エム

    色々とありがとうございました。^^

    2009年10月02日
  • ハッピープラス

    とても参考になりました!
    あとできれば2つ教えて頂けないでしょうか?

    http://www.rufuslin.jp/

    1.上記のサイトのように、大きい画像が動いて、動いた場所でクリックするとそのバナーのページに飛ぶ。

    2.カテゴリーにカーソルを合わせるtとその場で下にいくつか商品などが表示される。

    是非アドバイスをお願い致します。
    2014年07月02日
  • もも@管理人

    ◆ハッピープラスさん
    参考になり幸いです。^^

    ご質問の件ですが、おそらくどちらもjQueryプラグインを使ったものと思われます。
    JavaScriptについて私自身の理解が不十分なので、ひと様に説明できる状態ではありませんが、ヒントを差し上げることならできるかと…。
    「jQuery スライダー」
    「jQuery メニュー」
    で検索すると実例が山ほど見つかりますので、お勉強してみてください。そして、導入がうまくいったら、ぜひ教えてください。
    2014年07月02日
  • a_takahashi

    こんばんは。
    カーソルを乗せると画像は切り替わるのですが、
    マウスを離しても次の画像に切り替わってくれません。
    onmouseoutが機能していないようなのですが、原因おわかりに
    なりますでしょうか?

    よろしくお願いいたします。
    2019年02月16日
  • もも@管理人

    ◆a_takahashiさん
    こんばんは。記事を見てくださってありがとう!
    ご質問ですが、コードを見ていないので、あなたがうまくいっていない原因を知り得ません。
    ただ、私の経験上、多くの場合はスペルミスが原因です。
    全角・半角、大文字・小文字、ピリオド、半角スペース、シングルコーテーション(')・ダブルコーテーション(")など、正しく使えていますか?
    2019年02月17日

この記事へのトラックバック