海外在住の初心者でもブログで稼ぐ★ネットで金髪アフィリエイト!

ネットでブログを使って稼ぐ方法を中心に、海外在住でも稼ぐいろんなネタを紹介しちゃいます。

昨日の続き★「お気に入りに追加」ボタン応用編-HTML

こんにちは。


今日は昨日の記事の応用編です★


昨日の記事とは、、


ブログに「お気に入りに追加!」ボタンを追加しよう!



「またHTMLタグかよっ!」って声が聞こえてきそうですが、、

明日からは違うテーマにしますのでお許しを。。。




今日は昨日作ったボタンをちょっとアレンジしてみましょう♪




さて、昨日作ったのはこんなボタンでした。




タグにすると↓です。


<INPUT type="button" value="お気に入りに追加 !" onClick="javascript:window.external.AddFavorite('http://abroad-blog.seesaa.net/','海外在住でも稼ぐ!金髪アフィリエイト')" style="border-style:solid; border-width:2px; border-color:#66CCFF; background:#E0FFFF; font-size:10pt; color:#808080">


注)タグを記事内で表示するため括弧「<>」を大文字にしております。


これを応用するには↓↓↓



応用編その1:マウスカーソルを変化させる


↑で紹介したボタン、マウスカーソルが上にのってもウンともスンとも言わない可愛げのないボタンです。


そこで、「ここはクリックできるんだよ!」ということを示すためにボタンにマウスカーソルがのった時点で、カーソルを矢印から手のマークに変えてしまいましょう!


やり方は、タグの中に


onmouseover="this.style.cursor='hand'"


を付け加えてあげるだけです★


そうすると↓のようなボタンができあがります。

マウスカーソルを合わせてみてくださいね♪




念のため、タグも下に貼っておきます。


<INPUT type="button" value="お気に入りに追加 !" onClick="javascript:window.external.AddFavorite('http://abroad-blog.seesaa.net/','海外在住でも稼ぐ!金髪アフィリエイト')" style="border-style:solid; border-width:2px; border-color:#66CCFF; background:#E0FFFF; font-size:10pt; color:#808080" onmouseover="this.style.cursor='hand'">



やった〜!完成!!!というわけです。



応用編その2:ボタンの色を変化させる


次はマウスカーソルを合わせた時に色が変わるボタンを作ってみましょう♪


↓こんな感じです★





これもあるタグを足すだけ簡単にできちゃいます。


それは、、、


onmouseover=this.style.backgroundColor="red"

onmouseout=this.style.backgroundColor="#E0FFFF"


この二つです。


onmouseoverとは、マウスがボタンにのった状態の時のコマンドです。


今回は赤色に設定していますが、お好みで色を変えてください。


「Red」の部分を他の色に変えるだけです♪



onmouseoutとは、マウスが離れた後にどうするかを設定するコマンドです。


今回は、元の水色に戻したいので#E0FFFF(水色)に設定しました。


つまりは元のタグに、


1.マウスがボタンにのった時の命令

2.マウスがボタンから離れた時の命令


をしてやれば、それだけでOKです!


なんて賢いんだ!コンピューターは!!


タグは↓のようになります。



<INPUT type="button" value="お気に入りに追加 !" onClick="javascript:window.external.AddFavorite('http://abroad-blog.seesaa.net/','海外在住でも稼ぐ!金髪アフィリエイト')" style="border-style:solid; border-width:2px; border-color:#66CCFF; background:#E0FFFF; font-size:10pt; color:#808080" onmouseover=this.style.backgroundColor="red"; onmouseout=this.style.backgroundColor="#E0FFFF">



今日はこれで以上です★


辛抱強く読んでくださり有難うございました〜!(感謝!)



明日からは違う話題に移りますが、


ネタがなくなった際には、またHTMLタグネタを書く予定です(汗)


今日はブログにひとつ仕掛けをしました。


たいした仕掛けではないのですが(ってかバレバレか?!)。。。


ちなみに、


その仕掛けを大公開した記事はコチラ!




日本ぶろぐ村のアフィリエイトランキングで


11位まで来ました!


あと少しご声援をお願いしますっ!


人気Blogランキング
   ↑↑↑
応援クリックお願いします!
   ↓↓↓
ブログランキング にほんブログ村



では、また明日!

おやすみなさ〜い!!

この記事へのコメント
りりー夫さん、おはようございます〜

おお、ボタンですね。。。
今度やろうと思ってたんですよ〜
もーやる事がなくなってきたから^^;
やっぱり変化があった方が見てる方も
面白いです♪
作るのは大変でしょうが。。。

応援ぽちぽち☆
Posted by 情報起業で家族を養うぞ!【おいちゃん☆】 at 2006年09月08日 08:31
りりー夫さんおはようございます。
ひょんです。

ボタンおもしろいですね。

赤は強烈でした!

マネしないでおこう・・・(笑

ポコ∩\(^。^)っと応援
Posted by ひょん@のんびり内職アフィリでご在宅 at 2006年09月08日 09:03
こんにちわ〜!はなです☆
応援「ぽちっとな♪」にきました!

ボタンのカスタマイズ方、いいですね〜♪
今いろいろ試行錯誤していますので、ボタンもカスタマイズを予定中。

今日は会社が休みなので1日がんばりま〜す!
Posted by はな at 2006年09月08日 11:39
へぇ〜。
ボタンの色を変えられるんですか〜。
初めて知りました!

いい勉強をさせてもらいました。

ありがとうございます。
またきます!

ランクリ☆ぽっち
Posted by 最速最強ブログで稼ぐ@えいじ at 2006年09月08日 19:25
>おいちゃんさん、

ボタンシリーズ、ぜひお願いします♪
私も更にボタンを研究中なんですが、まだ到底完成しそうにないので、、
おいちゃんさん作成のボタンは面白そうですね〜
Posted by リリー夫 at 2006年09月08日 23:43
>ひょんさん

あ、やっぱり赤はNGでした?(笑)
適当に色設定しようと思ったら、赤を思いついてしまって、、そのまま使ってます(笑)

ご訪問&コメント&応援ありがとうございます!
Posted by リリー夫 at 2006年09月08日 23:45
リリー夫さん、こんばんは。
コヒガシ@トラックバックセンター攻略中です。

おおーカッコいいー!
色変わるのいいですね!
今度さっそくマネマネさせていただきます。

HTMLのさりげない紹介してもらえると
私は大助かりです。
HTMLってさっぱりなんです。

応援ポチッとな〜(祈)♪
Posted by サラリーマンパパ コヒガシ@トラックバックセンター攻略中 at 2006年09月08日 23:47
>はなさん

ボタンのカスタマイズ、またいつかやるかもしれません(笑)
すぐにはやらないと思いますが、、

私もまだまだ試行錯誤中です。
やるべきことはたくさんあっても作業がなかなか進まない、、
週末がんばるかな♪
Posted by リリー夫 at 2006年09月08日 23:48
>えいじさん、

すみません、ボタンの色をドギツい色に変えてしまいました。。
お好みで変更してくださいね。

私もえいじさんのブログからは色々勉強させてもらってます!
こちらこそいつもありがとうございます!
Posted by リリー夫 at 2006年09月08日 23:51
>コヒガシさん、

HTML、やってると段々とはまっていきます。
HTML関係の記事は自分で書いていても勉強になるのでまたやりたいと思います。

トラックバックセンターはほぼもう攻略完了ですね!
Posted by リリー夫 at 2006年09月08日 23:57
こんばんわ。

お礼&応援に参りましたぁ☆

HTMLは、私もただ今勉強中なんで

嬉しい情報ですね、私も真似させて

もらいます。

また、応援にきまぁす!!では、ポチリ
Posted by 庵子のんこ at 2006年09月09日 01:18
>庵子のんこさん

応援ありがとうございます!
HTML、攻略できればかなり幅が広がるはずなのでがんばりましょう!
わからないときは教えてくださいね♪
Posted by リリー夫 at 2006年09月09日 04:07
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。