特別編

第１回、第２回はいかがだったでしょうか

今回は特別編として

画像が変わるボタンに挑戦

今回はフリープラグインを使います
基礎編の続きなのでCSSの編集などに
はまだ行かずに行こうと思います。

なのでフリープラグインを利用することを前提とします
ヨロシクお願いします

フリープラグインを初めて使う方は
デザインの変更→サイドバーの設定→サイドバーの基本設定
にあるフリープラグインの編集の部分に今回のできたものを貼り付けて

必ずサイドバーの配置でフリープラグインを配置してください


今回は画像を２～３枚用意します
第１回でやったように画像をアップして
画像ＵＲＬをメモ帳などに保管しましょう

そして今回もリンク先ＵＲＬが必要なので
こちらも用意して下さい


まずはじめにこちらが今回の編集前の物です



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



見てわかると思いますが

・最初に表示される画像　－　①

・カーソルを乗せた時の画像　－　②

・カーソルを離したときの画像　－　③

こちら３枚使用してもよいですし

①と③を同じもので利用することもできます
なので２～３枚用意して下さい


自分は今回２枚をつかい読者登録の
画像が切り替わるボタンを作ってみました
画面左にあるものがそれです



こちらが①と③


これが②

というものです

画像のURLを入れてできたものがこちら


<a href="http://blog.ameba.jp/reader.do?bnm=how-i-got-over">
<IMG src="http://stat.ameba.jp/user_images/20101011/19/how-i-got-over/a0/ec/p/o0128012810795653045.png" border=0
onMouseOver=this.src='http://stat.ameba.jp/user_images/20101011/19/how-i-got-over/9a/15/p/o0128012810795653046.png'
onMouseOut=this.src='http://stat.ameba.jp/user_images/20101011/19/how-i-got-over/a0/ec/p/o0128012810795653045.png'>
</a>

皆さんもご自分のものを入れてみてください

終わりましたらフリープラグインに張り付けして保存

そしてブログの確認

できましたでしょうか？


今日はこれで完成です

お疲れ様でした

第１回はこちら

第２回はこちら

特別編　―　今回