RSS
 
 HOME >> Web >> ホームページ作成のヒントとアドバイス  
初心者に分かりやすい
このWebサイトについて
ホームページ作成
40ソアラ/レクサスSCブログ
無料フリー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>

 

[ 戻る ]

 

   
HOME >> Web >> ホームページ作成のヒントとアドバイス 

 

 












サイトマップ
コンタクト

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