ホームページの作成
[戻る] [MENU] [次へ]

（１０）拡大鏡ソフト

 説明

拡大鏡ソフトとは、画像を拡大するソフトです。
この「ホームページの作成」でも、解説の中に小さい画像を表示してクリックすると拡大するようにしている箇所が多いですから、どんなものかは想像できると思います。
このようにしているのは、最初から拡大画像を表示するのでは、スペースを圧迫してしまってレイアウトが崩れる事や、大きな画像は読み込みに時間が掛かるので、表示が遅くなるのを避けるためです。
閲覧者に必ず見せなければ説明できないような画像は、最初からそれなりの大きさで表示しておきますが、そうでないものは小さい画像にしておくのが一般的です。

拡大鏡ソフトとは、その中で特に大きく画像を拡大するものを言います。
別名で虫眼鏡ソフトなどとも言われているようです。
一般的なのは、表示している画像にマウスカーソルを乗せると、その部分が虫眼鏡でみているように円形で拡大して見えるものです。


 動作原理

小さい画像と大きな画像の２種類をあらかじめ用意しておきます。
マウスのカーソルが小さい画像の上に乗った時に、そのｘ、ｙ座標の位置を大きな画像のｘ、ｙ画像の座標位置に変換して表示するものです。
座標の変換は、例えば画像の大きさが大きい画像が小さい画像の１０倍であるなら、ｘ、ｙ座標の位置も１０倍するだけですから、比較的簡単です。
極端に大きな画像を表示する場合には、画像の読み込みに時間が掛かるために表示がもたつきますが、最近のパソコンをご使用であれば、ストレスを感じる事はないでしょう。

私も画像を拡大して表示するページを作成しておりますが、似たような表示例がありましたので御紹介します。
製作が古いようなので、現在のブラウザでは対応できない部分もありそうなのですが、取敢えず動作させて見る事にします。
北海道立体マップが、それになります。
拡大表示のページに直接リンクさせておりますので、お使いの環境によっては表示しない場合もあるかも知れません。
そのような場合は、 Web 拡大鏡を作る からお入りください。


 自分の環境で動作させる

解説に従ってオリジナルの状態のままで動作させて見る事にしました。
注目の島の航空写真が、それになります。
私の環境ではそのままでも動作するようです。
但し、IE（インターネットエクスプローラ）では、表示がトロトロとした動き（描画が遅い）で、かったるいです。
これでは、ほとんどのノートパソコンで使い物にならないでしょう。
他のブラウザでは、まずまずの動きをしますから、やはりIEのJavaScriptは、遅いと言わざるを得ません。

動くとは言っても、インターネットエクスプローラーとネットスケープが全盛の頃のソフトですから、手直しをして見る事にしました。
それに、IEでは表示をもう少し高速化しないと使い物になりません。
画面の構成も、拡大画面をもう少し広く表示できるようにしたいと思います。
以下の部分を変更しました。
（１）ポインターの表示は不要と思われるので削除する。（高速化のため）
（２）拡大画面は画面全体を使う。
こちらが、注目の島の航空写真の変更バージョンです。
拡大画面を画面全体を使うようにしましたら、なぜかIEでは動作しなくなりました。
他の主要ブラウザでは動作しますので、IEのバグが絡んでいるのかも知れません。
元々、IEではとろくて使い物になりませんでしたので、このままにしておきます。
以下に変更のソースを掲載しますので、改良する志のある方はトライしてみてください。



<html lang="ja">
<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="magnifier3.css">
</head>
<body>
<div id="curtain"><img src="images/skankoku1.jpg"></div>
<div id="large">
<img src="images/kankoku.jpg" alt="">
</div>
<div id="pointer" class="pointer">
<img src="images/skankoku1.jpg" width="110" height="101">
</div>
<script language="JavaScript">
large_width = 2209;
large_height = 2033;  
pointer_width = 110;
pointer_height = 101;  
small_width = 110;
small_height = 101;  
background_color= "#d2d2d2";
</script>
<script src="magnifier3.js"></script>
</body>
</html>

以下が、magnifier3.css になります。 


* {
  margin: 0px;
  padding: 0px;
}
html{
  margin: 0px;
  padding: 0px;
}

body{
  background-color: #d2d2d2;
  overflow:hidden;
}

div {position:absolute;}

#pointer{
  left:0px;
  z-index: 3;
}

#large {
  position:fixed;
  top:-70%;
  z-index:1;
}

以下が、magnifier3.js になります。
nn4は不要と思われますが、一応記載しておきました。 


  ie = ((document.all) && (navigator.userAgent.indexOf("Opera") < 0));
  opera = navigator.userAgent.indexOf("Opera") > -1;
  nn4 = document.layers;
  nn6 = document.getElementById;
  
  border_size = 4;
  pw = pointer_width/2;
  ph = pointer_height/2;
  differ = large_width / small_width;
  differ2 = large_height / small_height;
  vs = small_width + border_size;
  
  if(ie)
  {
    lg = document.all.large;
    pt = document.all.pointer;
    ct = document.all.curtain;
    lg.style.pixelWidth = vs;
    
    ct.style.pixelLeft = vs;
    ct.style.pixelTop = document.body.clientHeight;
    ct.style.pixelWidth = screen.width;
    ct.style.pixelHeight = large_height - document.body.clientHeight;
    ct.style.backgroundColor = background_color;
    
    window.document.onmousemove = Seekmap;
  }
  else if(opera)
  {
    lg = document.getElementById('large');
    pt = document.getElementById('pointer');
    ct = document.getElementById("curtain");
    lg.style.left = vs;
    
    ct.style.left = vs;
    ct.style.top = document.body.clientHeight;
    ct.style.width = screen.width;
    ct.style.height = large_height - document.body.clientHeight;
    ct.style.backgroundColor = background_color;
    
    window.document.onmousemove = Seekmap;
  }
  else if(nn4)
  {
    lg = document.layers['large'];
    pt = document.layers['pointer'];
    ct = document.layers["curtain"];
    lg.moveTo(vs, 0);
    
    ct.moveTo(vs, window.innerHeight);
    ct.resizeTo(screen.width, large_height - window.innerHeight);
    ct.bgColor = background_color;
    
    window.captureEvents(Event.MOUSEMOVE);
    window.onMouseMove = Seekmap;
  }
  else if(nn6)
  {
    lg = document.getElementById('large');
    pt = document.getElementById('pointer');
    ct = document.getElementById("curtain");
    lg.style.left = vs + "px";
    
    ct.style.left = vs + "px";
    ct.style.top = window.innerHeight + "px";
    ct.style.width = screen.width + "px";
    ct.style.height = (large_height - window.innerHeight) + "px";
    ct.style.backgroundColor = background_color;
    
    window.document.onmousemove = Seekmap;
  }
  
  function MoveX(obj, x)
  {
    if(ie) obj.style.pixelLeft = x;
    else if(opera) obj.style.left = x;
    else if(nn6) obj.style.left = x + "px";
    else if(nn4) obj.left = x;
  }

  function MoveY(obj, y)
  {
    if(ie) obj.style.pixelTop = y;
    else if(opera) obj.style.top = y;
    else if(nn6) obj.style.top = y + "px";
    else if(nn4) obj.top = y;
  }
  
 function Seekmap(e)
  {
    if(ie || opera)
    {
      var ex = event.clientX;
      var wy = event.clientY;
      
      var cw = document.body.clientWidth;
      var ch = document.body.clientHeight;
    }
    else if(nn6)
    {
      var ex = e.pageX;
      var wy = e.pageY;
      var cw = window.innerWidth;
      var ch = window.innerHeight;
    }
    else if(nn4)
    {
      var ex = e.x;
      var wy = e.y;
      var cw = window.innerWidth;
      var ch = window.innerHeight;
    }

    midW = (cw - small_width) / 2;
    midH = ch / 2;
    
    indX = midW + vs - pw;
    indY = midH - pw;
    
    byX = ex * differ;
    byY = wy * differ;
    byY2 = wy * differ2;
    
    if((ex < small_width) && (wy < small_height))
    {
      criticalX = vs + midW - byX;
      criticalY = midH - byY;
      if(criticalX < vs)
      {
        if((criticalX + large_width) < cw)
        {
          MoveX(pt, 0);
          MoveX(lg, cw - large_width);
        }
        else
        {
          MoveX(pt, 0);
          MoveX(lg, criticalX);
        }
      }
      else
      {
        MoveX(pt, 0);
        MoveX(lg, vs);
      }
      
      if(criticalY < 0)
      {
        if ((ch - criticalY) > large_height)
        {
          MoveY(pt, 0);
          MoveY(lg, ch - large_height);
        }
        else
        {
          MoveY(pt, 0);
          MoveY(lg, criticalY);
        }
      }
      else
      {
        MoveY(pt, 0);
        MoveY(lg, 0);
      }
      if(nn4) pt.visibility = true;
      else pt.style.visibility = 'visible';
      if ((ex >= 0) && (wy >= 0))
      status = ex + ' : ' +wy;
      else status = "";
    }
    else
    {
      if(nn4) pt.visibility = true;
      else pt.style.visibility = 'visible';
      status = "";
    }
  }
  
  function CheckWindowState()
  {
    flag = true;
    cws=10;
    if(ie || opera)
    {
      cw0 = document.body.clientWidth;
      ch0 = document.body.clientHeight;
    }
    else if(nn6 || nn4)
    {
      cw0 = window.innerWidth;
      ch0 = window.innerHeight;
    }
    if (opera || nn4) CheckWindowSize();
  }
  
  function CheckWindowSize()
  {
    clearTimeout(cws);
    cws = setTimeout("CheckWindowSize()",100);
    if (opera)
    {
      cw2 = document.body.clientWidth;
      ch2 = document.body.clientHeight;
    }
    else if(nn4)
    {
      cw2 = window.innerWidth;
      ch2 = window.innerHeight;
    }
    if (flag && (cw0 != cw2 || ch0 != ch2))
    {
      flag = false;
      location.reload();
     }
  }
  
  window.onload = CheckWindowState;

オリジナルなコードの不要と思われるる部分を書き直した程度なので、無駄な部分が多くあります。
IEで動かないのでは、致命的な欠陥プログラムと言われるでしょう。


[戻る] [MENU] [次へ]