(補足)
8−1.ボタン(色・形…編)と合わせて使うと、見栄えが良くなるかも。
(例)「色付きのボタン」+「ボタンを押してコメントが出る」を作る。
<input type="button" value="ボタンの文字" style="background-color:#背景の色;color:#文字の色;border-color:#枠の色" onClick="alert('コメントの文字')">
ここで、青色が8−1.ボタン(色・形…編)の物を紫色が8−2.ボタン(押すと…編)の物を使っています。
ボタンの文字を改行する場合は、半角の が <br> の役目を果たして、改行タグになります。
(注1)応用編のように {alert('メッセージ')} を加えることによって、何回でもメッセージを出すことが出来ます。
(注2)二択の応用編のように if(confirm 〜 ('キャンセルのコメント')} を加えることによって、何回でもO・K、キャンセルを付け加えることが出来ます。
(注3)コメント文字を改行する場合は、(コメントの文字・最初のクリックした時の文字・OKの文字・キャンセルの文字)半角の \n が <br> の役目を果たして、改行タグになります。
(例)おっは〜\nおやすみぃ〜(コメント文字の場合) = おっは〜<br>おやすみぃ〜(通常の場合)
(注4)動く文字のタグ(marquee)の詳細は、1−2.文字(動き編)を参考にして下さい。青い文字の部分は、タグを識別する部分です。青い文字が入っているタグを同一ページに複数個つかう場合には、青い部分をそれぞれ、お好きな半角英数字に変更して下さい。通常は、変更しなくて大丈夫です。変更する場合は、小さな「.」まで消さない様に注意して下さいね。
赤い文字の部分を変更してコピー貼り付けで使ってね! | |
---|---|
ボタンを押してコメントが出る(注3) | <input type="button" value="ボタンの文字" onclick="{alert('コメントの文字')}"> |
ボタンを押してコメントが出る(応用編)(注1.3) | <input type="button" value="ボタンの文字" onclick="{alert('一回目の文字')}{alert('2回目の文字')}"> |
二択コメントのボタン(注3) | <input type="button" value="ボタンの文字" onclick="if(confirm('最初のクリックした時の文字')){alert('OKの文字')}else{alert('キャンセルの文字')}"> |
二択コメントのボタン(応用編)(注2.3) | <input type="button" value="ボタンの文字" onclick="if(confirm('最初のクリックした時の文字')){alert('1回目のOKの文字')}else{alert('1回目のキャンセルの文字')}if(confirm('2回目の文字')){alert('2回目のOKの文字')}else{alert('2回目のキャンセルの文字')}"> |
ボタンでリンク(同じ窓で) | <input type="button" value="ボタンの文字" onclick="top.location.href='URL'"> |
ボタンでリンク(別の窓で) | <input type="button" value="ボタンの文字" onclick="window.open('URL')"> |
アドレスを入力してボタンでリンク | <input type="text" value="http://" size="60" id="ad"><input type="button" value="ボタンの文字" onclick="window.open(ad.value)"> |
ボタンで印刷フォーム | <input type="button" value="ボタンの文字" onclick="window.print()"> |
ボタンで更新 | <input type="button" value="ボタンの文字" onclick="location.reload()"> |
ボタンで前のページ | <input type="button" value="ボタンの文字" onclick="history.back()"> |
ボタンで次のページ | <input type="button" value="ボタンの文字" onclick="history.forward()"> |
ボタンでページを閉じる | <input type="button" value="ボタンの文字" onclick="self.close()"> |
背景色変更ボタン | <input type="button" value="ボタンの文字" onclick="document.bgColor='#背景の色'"> |
文字色変更ボタン | <input type="button" value="ボタンの文字" onclick="document.fgColor='#文字の色'"> |
背景画像変更ボタン | <input type="button" value="ボタンの文字" onclick="document.body.background='背景画像のURL'"> |
クリックで消えるボタン | <input type="button" value="ボタンの文字" onclick="this.style.visibility='hidden'"> |
お気に入りに追加ボタン | <input type="button" value="ボタンの文字" onclick="window.external.AddFavorite ('お気に入りにしたいURL','お気に入りの名前')"> |
スタートページに登録ボタン | <input type="button" value="ボタンの文字" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('スタートページにしたいURL');"> |
ボタンで動く文字が止まる(右→左)(注4) | <marquee id="m1">文字</marquee><input type="button" value="ボタンの文字" onclick="m1.stop()"> |
ボタンで動く文字が止まる(左→右)(注4) | <marquee id="m2" direction="right">文字</marquee><input type="button" value="ボタンの文字" onclick="m2.stop()"> |
ボタンで動く文字が止まる(上→下)(注4) | <marquee id="m3" direction="down">文字</marquee><input type="button" value="ボタンの文字" onclick="m3.stop()"> |
ボタンで動く文字が止まる(下→上)(注4) | <marquee id="m4" direction="up">文字</marquee><input type="button" value="ボタンの文字" onclick="m4.stop()"> |
ボタンで動く文字が止まる[また動くボタン付](右→左)(注4) | <marquee id="m5">文字</marquee><input type="button" value="止まるボタンの文字" onclick="m5.stop()"><input type="button" value="動くボタンの文字" onclick="m5.start()"> |
ボタンで動く文字が止まる[また動くボタン付](左→右)(注4) | <marquee id="m6" direction="right">文字</marquee><input type="button" value="止まるボタンの文字" onclick="m6.stop()"><input type="button" value="動くボタンの文字" onclick="m6.start()"> |
ボタンで動く文字が止まる[また動くボタン付](上→下)(注4) | <marquee id="m7" direction="down">文字</marquee><input type="button" value="止まるボタンの文字" onclick="m7.stop()"><input type="button" value="動くボタンの文字" onclick="m7.start()"> |
ボタンで動く文字が止まる[また動くボタン付](下→上)(注4) | <marquee id="m8" direction="up">文字</marquee><input type="button" value="止まるボタンの文字" onclick="m8.stop()"><input type="button" value="動くボタンの文字" onclick="m8.start()"> |
ボタンで動く文字が逆に動く(右→左)(注4) | <marquee id="m9">文字</marquee><input type="button" value="ボタンの文字" onclick="m9.direction='right'"> |
ボタンで動く文字が逆に動く(左→右)(注4) | <marquee id="m10" direction="right">文字</marquee><input type="button" value="ボタンの文字" onclick="m10.direction='left'"> |
ボタンで動く文字を左右に操作(右→左)(注4) | <marquee id="m11">文字</marquee><input type="button" value="左に動くボタンの文字" onclick="m11.direction='left'"><input type="button" value="右に動くボタンの文字" onclick="m11.direction='right'"> |
ボタンで動く文字を左右に操作(左→右)(注4) | <marquee id="m12" direction="right">文字</marquee><input type="button" value="左に動くボタンの文字" onclick="m12.direction='left'"><input type="button" value="右に動くボタンの文字" onclick="m12.direction='right'"> |
ボタンで動く文字が逆に動く(上→下)(注4) | <marquee id="m13" direction="down">文字</marquee><input type="button" value="ボタンの文字" onclick="m13.direction='up'"> |
ボタンで動く文字が逆に動く(下→上)(注4) | <marquee id="m14" direction="up">文字</marquee><input type="button" value="ボタンの文字" onclick="m14.direction='down'"> |
ボタンで動く文字を上下に操作(上→下)(注4) | <marquee id="m15" direction="down">文字</marquee><input type="button" value="上に動くボタンの文字" onclick="m15.direction='up'"><input type="button" value="下に動くボタンの文字" onclick="m15.direction='down'"> |
ボタンで動く文字を上下に操作(下→上)(注4) | <marquee id="m16" direction="up">文字</marquee><input type="button" value="上に動くボタンの文字" onclick="m16.direction='up'"><input type="button" value="下に動くボタンの文字" onclick="m16.direction='down'"> |