HTMLソース(java-script)の書式設定

画像をクリックすれば拡大します。


最上部からライブ画像を含んだ「画像をクリックすれば拡大します。」テキスト文までを構成する、動作確認済のJavaScriptを含んだHTMLソースの表示と基本的な設定内容を表にして下記に挙げてみた。

サーバー側の基本設定における仮説の環境条件
実行ファイルのURL http://www.takahashi-oa.com/takaoa/live.html
画像ファイルのプロパティ licam.jpg    320×240ピクセル 18.0KB   デフォルト表示画像
licam_.jpg   640×480ピクセル 44.5KB  拡大表示画像
licam_50.jpg 160×120ピクセル  8.8KB   予備画像
画像ファイルの転送先              ディレクトリー名 (URL) http://www.takahashi-oa.com/takaoa/live.files/
更新時間と更新ファイル名の設定 実行ファイルと同じ live.html 更新時間は30秒毎。
拡大表示の実行ファイルのURLとフレーム設定 JavaScriptによる機能制限を掛けた660×500ピクセルサイズの新規Windowの起動
画像ファイルのURLと表示の設定 拡大画像をWindowサイズに合わせ表示

一般的に表内の各設定数値は全て任意による数値であるが、使用するデジタルカメラやPCの性能並びに、インターネットにおいて
の通信速度によってかなりの変動が考えられますが、初めて設定される方は、まず上記の表に挙げられた設定内容の意味をある
程度理解して頂きましたら、下記ソース内の内容とを十分見比べて、実際に設定変更によって書き換えられる個所を把握して頂き
文法ミスの無い様書き換え作業を行って頂ければまず100%成功致します。

即ご利用頂けます様に、変更箇所のみ着色してみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0034)http://www.takahashi-oa.com/takaoa/live.html -->
<HTML>
<HEAD>
<TITLE>配信画像の表示設定</TITLE>
<META name="GENERATOR" content="IBM WebSphere Homepage Builder V6.0.0 for Windows">
<META content="text/html; charset=Shift_JIS" http-equiv="Content-Type">
<META content="text/css" http-equiv="Content-Style-Type">
<META content="30" http-equiv="Refresh" ;URL="live.html">
<SCRIPT language="JavaScript">
function wide(){
msgwindow=window.open("","nextwindow","menubar=no,scrollbars=no,resizable=no,width=660,height=500");
msgwindow.location="http://www.takahashi-oa.com/takaoa/wide.html";
}

</SCRIPT></HEAD>
<BODY>
<CENTER>
<TABLE border=6 cellSpacing=2>
<TBODY>
<TR>
<TD><A href="javascript:wide()"><IMG border=0 name=cam
src="live.files/licam.jpg"></A></TD>
</TR>
</TBODY>
</TABLE>
<FONT color="#ff0033">画像をクリックすれば拡大します。</FONT></CENTER>
</BODY>
</HTML>


配信画像の表示時間の設定及び画像の差し替え作業を実行させるHTMLソース
(java-script)の書式説明。


赤文字で書かれた部分を「コピー」し、新たに設置するページのHTMLソース内に「貼り付け」て、紫文字で書かれたアカウント名及び設定値等の訂正を行いえば完了。緑文字は説明文。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0034)http://www.takahashi-oa.com/takaoa/live.html --> 画像表示されるページをフルパスで表示
<HTML>
<HEAD>
<TITLE>配信画像の表示設定</TITLE> ページのタイトル名
<META content="IBM WebSphere Homepage Builder V6.0.0 for Windows" name="GENERATOR">
<META content="text/html; charset=Shift_JIS" http-equiv="Content-Type">
<META content="text/css" http-equiv="Content-Style-Type">
<META content="30" http-equiv="Refresh" ;URL="live.html"> ページ更新時間の設定と実行ファイル
<SCRIPT language="JavaScript">

function wide(){
msgwindow=window.open("","nextwindow","menubar=no,scrollbars=no,resizable=no,width=
660,height=500");      
マウスで画像をクリックすれば無更新・メニューバー・スクロールバーの非表示設定の660ピクセル×500ピクセルサイズ
の新しいWindowsの起動を実行させるScript。

msgwindow.location="http://www.takahashi-oa.com/takaoa/wide.html";
}実際に起動するファイルのURL

</SCRIPT></HEAD>
<BODY><CENTER>
<TABLE border=6 cellSpacing=2>
<TBODY>
<TR>   
ここから書かれたJavaScliptには画像の中央配置と開いたWindoeサイズに合わせて画像サイズの取得をする。
<TD><A href="javascript:wide()"><IMG border=0 name=cam
src="
live.files/licam.jpg"></A></TD>
</TR>
実行する画像ファイル名を相対パスで、表示
</TBODY>
</TABLE>
</CENTER>
<CENTER><FONT color="#ff0033">画像をクリックすれば拡大します。</FONT><BR>
<BR>
</CENTER>

<CENTER></CENTER>
<CENTER></CENTER>
</BODY>
</HTML>