カーソルを乗せると絵が変わる!

こんにちは、トリでございます。

 

最近の記事を見て頂けるとわかると思うのですが、

ちょっとしたギミックとか加工にハマり気味の管理人です。

 

他の方のブログを見ていると、

 

「ん?これはどうなってるんだ!?」

 

とか

 

「おぉっ!これ、私もやりたい!」

 

となって、すぐカタカタと検索してしまうんです。

で、その方法を見つけて、うまく出来た時はガッツポーズ。

すぐみなさんとシェアモードになります。

 

たまにどうしてもわからなくて、

 

「すみませ~ん・・・お宅のそれ、どうされてるんですかねぇ?」

 

なんて、ドアを叩くこともあります。

もしみなさんのドアもノックされましたら、

生暖かく迎え入れて下さると嬉しいです(笑)

 

 

ロールオーバーの方法

今回ご紹介する技その1は、「ロールオーバー」と呼ばれるものです。

みなさんも一度は目にしたことがある、カーソルを乗せると画像が変わる技です。

 

 

↓これです。カーソルを乗せてみて下さい。

 

 

 

どうでしょう?見たことあると思います。

実はこれ、画像タグにある属性を足すだけで可能なんですよ。

 

そのタグとは、こちら。

 

<img src="カーソルを乗せる前に表示する画像のURL" border=0
onmouseover="this.src='カーソルを乗せた時に表示する画像のURL'"
onmouseout="this.src='カーソル乗せる前に表示する画像のURL'">

 

簡単にいうと、画像タグの中で、

カーソルを乗せていない時と乗せた時、それぞれの画像を指定してあげる感じですね。

 

ちなみにタグとは、サイトやブログを構成している骨組みみたいなもので、

属性とはそのタグに付加するオプションのようなものです。

このタグは一つでも記号が抜けると機能しませんので、ご注意下さいね。

 

私は " と ' がよく見えてなくて、何度やっても上手くいかなくて、

「おっかしぃなぁ~」と1時間くらい唸っていたんですが、

ようやく画像URLの後の ' が一つ抜けていることに気づきましてf^_^;

どんな些細な記号さえも落としてはならぬという、タグ界の厳しさを学びました。

 

 

コメント表示の方法

その2の技は、カーソルを乗せた時にコメント(補足説明)が出る方法です。

 

 

↓こんなのです。

 

 

これもタグをちょちょいといじれば表示可能です。

そのタグとは、こちら。

 

<img src="画像のURL" title="コメント内容">

 

とってもシンプルです。

画像タグの中にコメントを入れるためのtitle属性を挿入するだけです。

 

ちなみに、画像が表示されない時に、代わりに文字が表示されるようにする時は、

alt属性(代替テキスト)というものを使います。

 

 

↓こんな感じです。

 

トリのアバター

 

 

参考までにタグは下記の通り。

 

<img src="画像のURL" alt="画像のタイトル">

 

画像のコメントや補足説明にはtitle要素を、

画像のタイトルや名称にはalt要素を使うと覚えておきましょう。

 

 

ちなみに、title属性は文章にも付けることができますよ。

試しに書き文章にカーソルを置いてみてください。

 

 

カーソルを置いてみてね♪

 

 

title属性は何かのタグに付属する形で使うものなので、

それ単体で使うとtitleタグとしてまた別の機能になってしまうので、ご注意下さいね。

 

ちょっと後半ややこしい話になっちゃいましたが、

サイトやブログはタグと呼ばれるもので構成されていて、

そこに属性を足せば機能が追加出来るんだよ~くらいに思っておいて下さい^^

 

 

この記事に関連する記事一覧

コメントは6件です

  1. もんふじ より:

    こんにちは、もんふじです。

    前回と同じくこれも知りませんでした!
    トリさん、もうギミックマスター目指しちゃいましょう!!w
    ギミックの引き出しが多いとそれだけでブログの差別化が図れそうですね。
    勉強になります。

    応援していきます♪

    • もんふじさま、こんにちは。

      そうですね~。もうトリ@ギミックマスターに改名しましょうか(笑)
      といっても、自分が編み出した技じゃなくて、先達の技を拝借しているだけなんですけどねf^^;
      ギミックだらけにするとからくり屋敷みたいになっちゃうので、ちょっとしたアクセントにどうぞ。

      いつも応援ありがとうございます。

  2. タクヤ より:

    トリさん、はじめまして。
    タクヤと申します。

    ヒロヤスさんのブログのコメントから来ました。

    こういったギミックって
    見つけた時に「おっ!」って思います!

    通常やらないことだから、
    他の人との差別化にもいいかもですね!

    面白いな~と思いました。

    また訪問させていただきますね。

    ランキング応援していきます♪

    • タクヤさま、はじめまして。

      ギミックの仕掛けを知った時って、アハ体験みたいな刺激を受けますよね(笑)
      ちょっとしたサイトのアクセントやクリック率の向上には役立つかと^^

      ご訪問と応援ありがとうございました☆

  3. ともちん より:

    トリさん、こんにちは。ともちんと言います。
    私はPC得意とは言い難く、なかなか取りかかりすらできていませんが、今回のロールオーバーとか良いですね。
    してみたいと思いました。
    ちょっつぃたことなんだけど、技術使われてるブログは素敵ですよね。
    応援しますね。

    • ともちんさま、こんにちは。

      私もPCは基本操作くらいしか出来ないのですが、
      意外とそんなに詳しくなくても出来る技ってあるみたいです。
      また新たな技術を身につけましたらご紹介しますね。

      応援ありがとうございました^^

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ