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

 

 

 



 

JavaScriptでサブウインドウによるオリジナル画像表示

 

 縮小画像をクリックすると、オリジナルの画像をサブウインドウで表示するスクリプトです。画像のサイズに合わせてウインドウのサイズを自動調整し、ウインドウの中央に表示してくれます。

 例)

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

 

ソース

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

<script language="JavaScript">
<!-- // サイズ判断型センタービュー(http://www.coolandcool.net/)

var new1,win1p;

function CenterOpen (img,Xv,Yv) {
if (win1p=="on") {
if (new1.closed) {} else {new1.close();}
}

win1p = "on";
Xw=Xv+50;
Yw=Yv+80;

new1=window.open("", "newwin", "resizable=1,width="+Xw+",height="+Yw+"");
if(navigator.appVersion.charAt(0)>=3){new1.focus()};
new1.document.clear();
new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"><title>View Window</title></head><body bgcolor=#000000>
<table width=100% height="+Yv+" border=0 cellpadding=0 align=center valign=center>");
new1.document.write("<tr><td align=center valign=center><img src="+img+" width="+Xv+" height="+Yv+"></td></tr></table>");
new1.document.write("<center><form><input type=button value='このウインドウを閉じる' onClick='window.close()'></form></center>");
new1.document.write("</body></html>");
new1.document.close();
}

//-->
</script>

 

 リンクは次の通りです。

<a href="JavaScript:onClick=CenterOpen('画像ファイルのパス',オリジナル画像の横サイズ,オリジナル画像の縦サイズ);"><img src …… ></a>

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

<a href="JavaScript:onClick=CenterOpen('../../isay/
gallery/title.jpg',400,160);">
<img src="../../isay/gallery/title_s.jpg" border="2" width="150" height="60"></a>

 

表示されるウインドウの背景色を変えたり、壁紙を使う

 サブウインドウの背景色を変更したり、壁紙を使ったりすることができます。ヘッドタグ内に入れる記述のうち、

new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"><title>View Window</title></head><body bgcolor=#000000><table width=100% height="+Yv+" border=0 cellpadding=0 align=center valign=center>");

 この部分を通常のHTMLタグとして書き換えます。但し「"」は使えないので注意してください。どうしても使わなければいけないときは、「\"」このように書きます。

例)

<font size=2> …… ○
<font size="2"> …… ×
<font size=\"2\"> …… ○

 

 具体例は次のような感じです。

new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"><title>View Window</title></head><body bgcolor=#FF2435 background=img/kabe4.gif><table width=100% height="+Yv+" border=0 cellpadding=0 align=center valign=center>");

 

画像毎に背景色を変える

 クリックする画像毎に背景色を指定することもできます。次のタグを<head>タグから</head>タグの間にコピーします。(は改行マークです。実際に使う際は削除してください)。

<script language="JavaScript">
<!-- // サイズ判断型センタービュー(http://www.coolandcool.net/)

var new1,win1p;

function CenterOpen (img,Xv,Yv,cl) {
if (win1p=="on") {
if (new1.closed) {} else {new1.close();}
}

win1p = "on";
Xw=Xv+50;
Yw=Yv+80;

new1=window.open("", "newwin", "resizable=1,width="+Xw+",height="+Yw+"");
if(navigator.appVersion.charAt(0)>=3){new1.focus()};
new1.document.clear();
new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"><title>View Window</title></head><body bgcolor="+cl+"><table width=100% height="+Yv+" border=0 cellpadding=0 align=center valign=center>");
new1.document.write("<tr><td align=center valign=center><img src="+img+" width="+Xv+" height="+Yv+"></td></tr></table>");
new1.document.write("<center><form><input type=button value='このウインドウを閉じる' onClick='window.close()'></form></center>");
new1.document.write("</body></html>");
new1.document.close();
}

//-->
</script>

 

 リンクは次の通りです。

<a href="JavaScript:onClick=CenterOpen('画像ファイルのパス',オリジナル画像の横サイズ,オリジナル画像の縦サイズ,'背景色');">
<img src …… ></a>

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

<a href="JavaScript:onClick=CenterOpen('../../isay/
gallery/title.jpg',400,160,'#00FF00');">
<img src="../../isay/gallery/title_s.jpg" border="2" width="150" height="60"></a>

 

 

[ 戻る ]

 


人気記事ランキング
   

サイトマップ
コンタクト

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