25.ボタンをクリックすると小さなウィンドウが出てくる
http://www.sumnet.ne.jp/domp/jsbs/index.htm
と
http://www02.so-net.ne.jp/~oka/oritatami3c.html
のScriptを使用＆参考にしています。 |
|
クリックしたら、小さな小窓をひらき、更新履歴や、ちょっとしたお知らせを表示できると便利です。
画像を別の窓でサイズ指定したときの応用で、今度はボタンを作って位置を指定して作りましょう。
下のスクリプトを<HEAD>から</HEAD>の間に貼り付けます。
<SCRIPT language="JavaScript">
<!--
function OpenWin(){
win=window.open("window.htm","new","width=150,height=150");
win.moveTo(50,50);
}
// -->
</SCRIPT> |
もし、もうそのページでJava Scriptを使っている場合は、
<SCRIPT language="JavaScript">
という記述が既にあるはずですので、その後に、
</SCRIPT>
を除いて、貼り付けてください。
function OpenWin()
win=window.open
のところは、小さな窓を開くのが、ひとつの場合はそのままでもいいですが、もし、先に、画像を表示するのに、別窓を開くように指定していたりしたら、必ず、
function OpenWin1()
win1=window.open
や、
function OpenWin2()
win2=window.open
と、違うものになるように、指定してください。
見てわかるように、別に開く小窓の大きさは、幅150 高さ 150です。
場所の指定は
win.moveTo(50,50);
の部分です。左上隅からの位置になります。
もし、(0,0)
なら、左上隅の位置に、新しいウィンドが表示されます。
("window.htm"
の部分が、新しいウィンドが開いたときに表示されるファイルになりますので、そのファイル名を入れます。 |
|
| |
|
次に、ボタンを挿入したい場所を決め、そこのHTMLに、
右のソースを貼り付けます。
「ウィンドウを開く」というのが、ボタンの上の文字になります。
これで、ボタンは作られました。 |
|
<FORM>
<INPUT type="button" value="ウィンドウを開く" onClick="OpenWin()">
</FORM>
</CENTER>
|
|
|
右に見本を作ってみました。
下のボタンは「Open」と入れたものです。
|
|
|
|
さて、なんだか、あいそのない、ボタンですよね。
ボタンの色を変更してみましょう。
こんどは、スタイルシートというものを使います。
<HEAD>から</HEAD>の間に
| <style type="text/css"> </style> |
と貼り付けてください。
それから、さっきのボタンのところに、
<INPUT type="button" value="ウィンドウを開く"
onClick="OpenWin()" style="background:#D70028;color:#E7E2F8;"
> |
となるように
style="background:#D70028;color:#E7E2F8;"
を加えてみてください。
|
|
|
|
さて、ここで、色の指定がされているのがわかりますか？
色の番号が background と color でそれぞれ、背景（ボタンの色）と 文字の色が指定されています。
それでは、次に、色の番号の見方、を説明します。 |
|
| NEXT |
|
|
|
|
| HOME/Word
の使い方/Internet Explorerの使い方/Excelの使い方/Outlook
Expressの使い方/Windows の使い方/ホームページの作り方/私のデスクトップ/おすすめパソコン書籍/おすすめExcel書籍/HP作成代行/パソコン教室/ |
  |
