初心者に分かりやすい
ホームページ作成
ブログ(レビュー カメラ 写真)
無料CGI(Perl/PHP)配布
写真

 

 

 



 

JavaScriptでサブウインドウ壁紙表示

 

 画像をクリックすると、その画像を壁紙として表示するスクリプトです。 

例 )

↑画像をクリックしてみてください。

 

ソース

 次のタグを<head>タグから</head>タグの間にコピーします。よく分からない場合は、</head>の直前に入れてやって下さい(は改行マークです)。

<script language="JavaScript">
<!-- 壁紙ビュー http://www.coolandcool.net/

var new1,win1p,win1;
function backopen (img,x,y) {

if (win1p=="on") {
if (new1.closed) {} else {new1.close();}
}

win1p = "on";

new1=window.open("", "newwin", "resizable=1,width="+x+",height="+y+"");
new1.document.clear();
new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"></head><body background="+img+">");
new1.document.write("<BR><BR><BR><BR><center><form><input type=button value='このウインドウを閉じる' onClick='window.close()'></form></center>");
new1.document.write("</body></html>");
new1.document.close();
}

//-->
</script>

 

 リンクは次の通りです。

<a href="JavaScript:onClick=backopen('画像ファイルのパス',ウインドウ横サイズ,ウインドウ縦サイズ);"><img src …… > </a>

 リンクの具体例はこのような感じです。

<a href="JavaScript:onClick=backopen('smoke3-2.jpg',400,160);"><img src="smoke3-2.jpg" border="2" width="80" height="80"></a>

 

表示されるウインドウの大きさを固定する

 画像毎に開くウインドウのサイズを指定せずに、指定したサイズに固定します。いちいち画像毎にウインドウサイズを指定する手間が省けます。次のタグを<head>タグから</head>タグの間にコピーします(は改行マークです)。

<script language="JavaScript">
<!-- 壁紙ビュー http://www.coolandcool.net/

var new1,win1p,win1;
function backopen (img) {

if (win1p=="on") {
if (new1.closed) {} else {new1.close();}
}

win1p = "on";

new1=window.open("", "newwin", "resizable=1,width=300,height=200");
new1.document.clear();
new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"></head><body background="+img+">");
new1.document.write("<BR><BR><BR><BR><center><form><input type=button value='このウインドウを閉じる' onClick='window.close()'></form></center>");
new1.document.writeln("</body></html>");
new1.document.close();
}

//-->
</script>

 上記数字部分を、希望するウインドウのサイズに書き換えます(横サイズ、縦サイズの順です)

 

 リンクは次の通りです。

<a href="JavaScript:onClick=backopen('画像ファイルのパス');"><img src …… ></a>

 リンクの具体例はこのような感じです。

<a href="JavaScript:onClick="backopen('smoke3-2.jpg');"><img src="smoke3-2.jpg" border="2" width="80" height="80"></a>

 

 

[ 戻る ]

 


人気記事ランキング
   

サイトマップ
コンタクト

文章や画像等の無断利用・転載はご遠慮ください。
当サイトへのリンクは原則フリーです。どのページにリンクされても構いません。
Copyright © CoolandCool. All rights reserved.