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

 

[ 戻る ]

 

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

 

 












サイトマップ
コンタクト

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