| 2002年05月10日(金) |
レッツカスタマイズ投票ボタン |
再び投票ボタンネタ。どうやら味をしめたらしい。
今回はボタンのカスタマイズ例を挙げてみたいと思う。
エンピツにもいくつか例が載っているが、HTMLをよく知らない人はこれをコピペするしか出来ないだろう。
が、当然だがもっとカスタマイズしまくることはできる。
ちなみに下の例、全部ちゃっかりまともに投票されるので、試すなら気をつけて試してください。
ま、一回押しちゃったらあとはもう何度押したって変わんないので、試してくれるとラッキーなのですが。
では、まずは簡単めに、色を変える方法。
これは簡単に、
することができる。
<form action="../../usr/bin/vote" method="POST" target="vote"><input type="hidden" name="id" value="ID番号"><input type="hidden" name="cls" value="nikki"><input type="submit" value="ボタンの文字" onclick='subWin = window.open("","vote","scrollbars=1,resizable=1,width=240,height=200,toolbar=0,location=0,directories=0,menubar=0")' style="border:枠線の太さ(ピクセル)px solid 枠線の色(#xxxxxx);color:文字の色(#xxxxxx);background-color:背景の色(#xxxxxx)">
|
枠線の文字は単純に半角数字で指定すればいいし、色はお使いのHTMLエディタで調べて貼り付ければいい。
Windowsのユーザーなら、当サイトで公開しているフリーソフト｢色とる｣を使えば簡単にお好みの色が作成できる(宣伝)。
次。文字が変わるのではなく、アラートが出るタイプ。
<form action="../../usr/bin/vote" method="POST" target="vote"><input type="hidden" name="id" value="ID番号"><input type="hidden" name="cls" value="nikki"><input type="submit" value="ボタンの文字" onclick='alert("アラートの文字");subWin = window.open("","vote","scrollbars=1,resizable=1,width=240,height=200,toolbar=0,location=0,directories=0,menubar=0")'>
|
アラートでなく、新しいウィンドウを出すことも出来なくはない。
ここでは別ページを用意するのが面倒だったのでやらなかったが、専用のありがとうございましたページを作ってみるのも面白い。但し、エンピツの投票ボタンはただでさえ別窓を開くのでうざいかもしれない。
<form action="../../usr/bin/vote" method="POST" target="vote"><input type="hidden" name="id" value="ID番号"><input type="hidden" name="cls" value="nikki"><input type="submit" value=ボタンの文字" onclick='window.open("表示するURL","nwindow");subWin = window.open("","vote","scrollbars=1,resizable=1,width=240,height=200,toolbar=0,location=0,directories=0,menubar=0")'>
|
そして、触れたときと押したとき、二段階で文字が変わったりするタイプなども。
<form action="../../usr/bin/vote" method="POST" target="vote"><input type="hidden" name="id" value="ID番号"><input type="hidden" name="cls" value="nikki"><input type="submit" value="ボタンの文字" onMouseOver='this.value="触ったときのボタンの文字"' onclick='this.value="押したあとのボタンの文字";subWin = window.open("","vote","scrollbars=1,resizable=1,width=240,height=200,toolbar=0,location=0,directories=0,menubar=0")'>
|
最後に押せないボタンの作り方。
<form action="../../usr/bin/vote" method="POST" target="vote"><input type="hidden" name="id" value="ID番号"><input type="hidden" name="cls" value="nikki"><input type="submit" value="ボタンの文字" onMouseOver='alert("アラートの文字")' onclick='this.value="押したあとのボタンの文字";subWin = window.open("","vote","scrollbars=1,resizable=1,width=240,height=200,toolbar=0,location=0,directories=0,menubar=0")'>
|
自分の投票ボタン、押せなくして何が面白いのかという至極もっともな説もあるにはあるのだが気にしないで欲しい。
ちなみに、工夫次第でこれちゃんと押せるので、変化後のメッセージもつけておくと面白い。
どうしても押し方がわからない人は個人的に聞いてくれ。
|
|
