美容・健康・ファッション・インテリア・DVD・お花・ギフト 安全安心のお買い物

町工場ネット トップ  ◇サイトマップ ◇新規登録 ◇プライバシーポリシー ◇相互リンクの方法 ◇問い合わせ

町工場 | 総合 | 美容 | ファッション | インテリア | 家電 | 資格| 食料 | 個人開業 | 書籍 | ギフト | ホビー | CD・DVD

←前に戻る トップページ 内容一覧 次ページ→
■新しいウィンドウを開く 簡単なテクニック 5
ページを閉じないでページ上に小さいウィンドウを開きたい時があります。ありますよね!サンプルを見ましょう。


右に小さいウィンドウが表示されます。使い方は考えてみてください。
たとえば、次のようなことも出来ます。


小さい方に表示する方法はほかにもありますが、少しややこしいのでちいさいウィンドウ用にページを作ったほうがいいでしょう。

それでは、ソースを見てみましょう。

<TITLE>26.新しいウィンドウを開く 簡単なテクニック 5</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function w1(){
var ww1;
ww1=window.open("","","toolbar=no,location=no,directries=no,status=
no,menubar=no,scrollbar=no,resizable=no,Width=200,Height=100 left=400,top=250");

function w2(){
var ww2;
ww2=window.open("","","toolbar=no,location=no,directries=no,status=
no,menubar=no,scrollbar=no,resizable=no,Width=200,Height=100 left=400,top=350");
ww2.location.href="http://4414.hoops.livedoor.com/sample21.htm" }
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#dbdbff" text="#0000cc" link="#ff00ff">
<P>26.新しいウィンドウを開く 簡単なテクニック 5<BR>
<BR>
ページを閉じないでページ上に小さいウィンドウを開きたい時があります。ありますよね!サンプルを見ましょう。<BR>
<BR></P>
<FORM><INPUT type="button" name="button1" value="ここを押してね。"onClick="w1()"></FORM>
<P><BR><BR><BR>
右に小さいウィンドウが表示<BR>
されます。つかいかたは考えて<BR>
みてください。<BR>
<BR>
たとえば、次のようなことも出来ます。<BR>
<BR></P>
<FORM><INPUT type="button" name="button2" value=" 注意書き" onclick="w2()"></FORM>
<P><BR>

ちょっとややこしいですから、おちついてみていきましょう。どちらがぬけてもうまくいきません。まず、「ここを押してね。」のボタンを作ります。

<INPUT type="button" name="button1" value="ここを押してね。" onClick="w1()">

「ここを押してね。」を好きな文字に変えると、その文字が表示されます。長さは自動的に文字にあわせられます。

onClick="w1( )"  は、オンクリック (マウスボタンが押されたとき) という意味です。
w1( )は、関数といってw1という名前の関数をさします。( と ) の間には空白はいれません。上のタグを翻訳すると

「入力のタイプは一般ボタンです。ボタンの名前は「ボタン1」と付けられています。ボタンに表示する文字はここを押してね。です。このボタンがマウスで押されたときは w1 という名前の関数を実行してください。」

となります。では、関数 w1 の内容をみてみましょう。

function w1(){
var ww1;
ww1=window.open("","","toolbar=no,location=no,directries=no,status=
no,menubar=no,scrollbar=no,resizable=no,Width=200,Height=100 left=400,top=250");


function w1()が関数の名前です。決まりですからそのまま使いましょう。ボタンを作るときに関数の名前を変えて、たとえば kansuu にしたら、ここも
function kansuu() とします。どんな名前でもいいのですが、必ず両方同じ名前にします。

var ww1; というのも決り文句です。このww1もどんな文字でもいいのですが,次の行に同じように書いてあるとうり両方とも同じ名前にしなければなりません。コロンやセミコロンをまちがえても正しく動きません。

あとは no を yes にいろいろ変えてみてどうなるか試してください。ページの上に表示するのですからあまりごちゃごちゃしないように scrollbar だけ yes にすればいいでしょう。

2番目も同じですが,一つ違うのは表示するファイル名(小さいウィンドウに表示するページ)を指定することです。

ww2.location.href="http://4414.hoops.livedoor.com/sample21.htm"

必ず  http  から始まるURLで指定します。これはこのページの場合ですから、皆さんの環境に合わせて書き換えてください。関数同士の名前の対応によく注意してください。コロンやセミコロンの区別、}の書き忘れなどささいなことで動きませんのでしっかり読んでください。

←前に戻る トップページ 内容一覧 次ページ→