クリックすると画像が変わるランキングバナー

最近、FC2ブログランキングというのに登録をしました。

そしてふと、ランキング上位の人はどんなブログを書いているのかな？と気になり、上位の人のブログを見ていたら「これは面白い!!」というアイデアを見つけたので、早速パクッて参考にしてみましたのでご紹介します。


それは、クリックすると画像が変わるランキングバナーです。

百聞は一見にしかずということで、まずはご覧ください。

下記のランキングバナーをクリックすると、別ウィンドウでランキングページが開きます。その後、このウィンドウに戻っていただくと画像が変わってます♪




いかがでしたでしょうか？バナーの絵が変わっていたと思います。

あ、このバナー画像は自分で作りましたよ♪
（　とは言っても、やはりド●ゴンク○ストのパクリですが（爆）　）


そ、それではやり方について説明いたします。


まずはじめに、（できれば同じサイズの）バナー画像を２枚用意してください。

　画像A：はじめに表示しておく画像。
　画像B：クリック後に表示したい画像。


次に、FC2ブログランキングから普通にタグを取得します。そうすると、

**********
<a href="http://blogranking.fc2.com/in.php?id=377127" target="_blank"><img src="http://blogranking.fc2.com/ranking_banner/a_01.gif" style="border:0px;"></a>
**********

のようなタグになると思います。

このタグの中のimgタグにちょっとした細工をします。

今回は、onclick属性というものを利用しています。属性の詳しい説明はウェブ上にゴロゴロありますので割愛させていただきます。

細工の内容としては、imgタグの中身を以下のように変更します。

**********
<img src="画像Aの置き場所/画像A" width="150" height="60" alt="FC2 Blog Ranking" onclick="this .src='画像Bの置き場所/画像B'" ondblclick="this .src='画像Bの置き場所/画像B'">
**********

上記の width="150" height="60"　の部分は、作ったバナー画像のサイズに合わせてください。

私の例の場合は、以下のようになっています。

　画像A：http://www.ilovegtr.com/blogbanner/dq1a.png
　画像B：http://www.ilovegtr.com/blogbanner/dq1b.png

**********
<img src="http://www.ilovegtr.com/blogbanner/dq1a.png" width="150" height="60" alt="FC2 Blog Ranking" onclick="this .src='http://www.ilovegtr.com/blogbanner/dq1b.png'" ondblclick="this .src='http://www.ilovegtr.com/blogbanner/dq1b.png'">
**********

その他の部分は同じでOKです。

ぜひこれを参考に、面白バナーを作ってくださいね♪

もし面白バナーを作られたら、当ブログのコメント欄に設置先のURLをご連絡いただければ必ず見に行きます!!


最後になりましたが、このアイデアを参考にさせていただいたサイトは以下になります。
イラストも可愛いし、内容も面白いです♪
そして、バナナバナーをクリックすると・・・ププッ!?

ビックリバイト体験4コママンガ『官公庁のバイトさん』