Web 拡大鏡を作る


今回は久々に Web ページ上で様々な用途に使えそうなツールを作ってみました。名づけて Web Magnifier（Web 拡大鏡）です。

まずは以下のサンプルを見て下さい。クリックすると新しいウィンドウが開きます。 左に小さい画像、右に大きい画像が表示されます。画像が完全に読み込まれたら、小さい画像の上にマウスカーソルを当ててみて下さい。

  1. 北海道立体マップ（３Ｄ形式の地図です）
  2. 精霊の棲む森（神秘的な森の写真です）
  3. Miracle island（幻想的なＣＧ画像です）

一見すると、よくある拡大鏡ツールに似ていると思います。違うのは、大小２つの画像は別ファイルなので、 単に拡大表示するだけでなく、違った表示が出来るという点です。 例えば地図であれば、小さい方の画像には入らない細かな地名・建物名を大きい方の画像には入れておく、といった使い方が出来ます（「北海道立体マップ」参照）。 地図に限らず、様々な写真や図面の拡大表示に、と用途は広いです。もちろん単に画像の拡大表示に使うこともできます。

モニターの画面サイズは限られています。ある対象の全体像を見ようとすれば画像を小さく縮小しなければならず、 反面、部分を拡大すると全体像は失われます。拡大ツールはマウスカーソルの指示点を通じて両方の情報を結びつけます。 Web Magnifier はこの機能を WWW ブラウザ上で実現するのみならず、 ページ制作者が意図すれば、単に拡大表示する以上の様々な情報を付加することが出来るわけです。

では早速作り方を説明しましょう。まず大きい画像と小さい画像を用意して下さい。これらは正確に相似でなければなりません。 １つの画像から画像ソフトを使ってサイズ変更（縦横の比率は固定）すれば簡単に作れます。また、重くならないために JPEG、GIF、PNG などの圧縮ファイルを作成すること、小さい画像の高さは画面からはみ出ないようにすることがポイントです。

用意できたら以下の２つのファイルをダウンロード（ファイルとして保存）して下さい。

次に以下の HTML ファイルを作成し、適当な名前を付けて保存して下さい（例：picture1.htm）。青で強調表示している個所は、あなたが設定するところです。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <!--使用している文字コード-->
<META http-equiv="Content-Script-Type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>（ページタイトル）</TITLE>
<LINK rel="stylesheet" type="text/css" href="magnifier.css"> <!--magnifier.css の置いてあるパスを指定-->
</HEAD>
<BODY>

<DIV id="large" class="large">
<IMG src="（大きい画像ファイルのパス）" width="(大きい画像の幅)" height="(大きい画像の高さ)">
</DIV>
<DIV id="pointer" class="pointer">
<IMG src="（ポインター画像のパス）" width="(ポインター画像の幅)" height="(ポインター画像の高さ)">
</DIV>
<DIV id="small" class="small">
<IMG src="（小さい画像ファイルのパス）" width="(小さい画像の幅)" height="(小さい画像の高さ)">
</DIV>
<DIV id="copyright" class="description" style="width: (小さい画像の幅)">

<P class="copyright"><SPAN class="wm">＜<A href="javascript:ShowHint()" title="このプログラムについて">Web Magnifier</A>＞</SPAN>
 Ver.1.0 by <A href="http://www.umechando.com/" target="umechan" title="梅ちゃん堂">梅ちゃん堂</A>)</P>

<P>（ここに好きな文章を入れます）</P>
</DIV>
<DIV id="curtain"></DIV>

<SCRIPT language="JavaScript" type="text/javascript">
<!--

large_width = (大きい画像の幅); //上の大きい画像の width と必ず同じ数字にして下さい。
large_height = (大きい画像の高さ); //上の大きい画像の height と必ず同じ数字にして下さい。

pointer_width = (ポインター画像の幅); //上のポインターの width と必ず同じ数字にして下さい。ここのサンプルなら81。
pointer_height = (ポインター画像の高さ); //上のポインターの height と必ず同じ数字にして下さい。ここのサンプルなら81。

small_width = (小さい画像の幅); //上の小さい画像の width と必ず同じ数字にして下さい。
small_height = (小さい画像の高さ); //上の小さい画像の height と必ず同じ数字にして下さい。

background_color= "(背景色)"; //任意。ここのサンプルなら "#ffffee"

//-->
</SCRIPT>
<SCRIPT src="magnifier.js" type="text/javascript"></SCRIPT> <!--magnifier.js の置いてあるパスを指定-->

</BODY>
</HTML>

ポインター画像とは小さい画像内のマウスカーソルの位置を大きい画像内で示す画像です。ここのサンプルの画像を使ってもいいし、 自分作ったものを使ってもかまいません。サンプルを使う場合、幅 81、高さ 81 です。

画像の width と height の設定を間違わないようにして下さい。画像の実際のサイズと違ってもいけません。でないと、まともに動作しません。 20行目の DIV id= "copyright" タグに「(小さい画像の幅)」とあるのは、小さい画像の width と同じ数字にするという意味です（NN4 対策）。

「（ここに好きな文章を入れます）」の部分には画像の説明や著作権表示など好きな文章を入れます（タグ可）。但し画面から下にはみ出さないよう、文章は簡潔にして下さい。 斜字体の２行は著作権表示なので削除・変更不可です。

できあがったら、この HTML ファイルとダウンロードした２つのファイルをそれぞれパスの通った所に置きます。 ３つのファイルを同じディレクトリに置く場合は上記のままで結構です。 もし（例えば） "files" という下位ディレクトリにあるなら <SCRIPT src="files/magnifier.js" ．．．のように指定を変えて下さい。

これでプログラムとしては完成です。ただ、これだけだと HTML ファイルを表示させたときにスクロールバーが表示されてしまいます。 別に気にしないならいいのですが、表示させたくない場合は他のページからリンクするときにスクロールバー無しの別ウィンドウで表示させるようにします。 仮にこの HTML ファイルのファイル名を "picture1.htm" とすると、そのファイルへのリンク元ページ（例えばここのページがそうです）には、

<SCRIPT language="JavaScript" type="text/javascript" >
<!--
function Show(URL)
{
SW = screen.availWidth;
SH = screen.availHeight;
NW = window.open(URL, "", "left=0,top=0,status=yes,resizable=yes");
NW.resizeTo(SW, SH);
}
//-->
</SCRIPT>

<A href="javascript:Show('picture1.htm')">Web 拡大鏡のページへ</A>

こんな感じにすると良いでしょう。 こうすることで、スクロールバーが非表示になると共に、表示領域も広くなります。

Web Magnifier のプログラムは著作権表示（上記ソースの斜線部分）を削除・変更しない限り、ホームページ等に自由に使って結構です。 やむを得ず大きく変更する必要がある場合は、掲示板かメールでご連絡下さい。 個々の画像には著作権のあるものもあります。画像の作者に了解を取るか、ご自分で用意したものを使用しましょう。



次のトピックは未定です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで