画像表示

サムネイルなどから画像を表示するとき、<a href="***.jpg">画像</a>と してしまうのがお手軽ですが、この方法では画像にコメントを付ける事が出来ません。 かといって、画像一枚毎にページを作るのは非常に無駄に感じます。そこでJavaScript を使って画像専用のWindowを自動で生成することにします。
ミニ画像 ミニ画像
これがお手軽な方法です。画像はこのWindowに表示され、ブラウザの戻るボタンで帰ってくる 必要があります。犬の画像のようにリンクを
<a href="***.jpg" target="_new">画像</a>
とすれば新しい画面で表示できますがコメントを付けることは出来ません。
ミニ画像 ミニ画像
JavaScriptを使った方法です。画像は別Windowで表示され、簡単なコメントもつけられます。 方法はごく簡単で、 
<script langurge="JavaScript">
  <!--
  function photdisp(i){
    photWin = window.open("","photdisp");
    if (i==1){
      photWin.document.open();
      photWin.document.write('<HTML><HEAD>');
      photWin.document.write(';<TITLE>JavaScript</TITLE>');
      photWin.document.write('</HEAD><BODY>');
      photWin.document.write('<IMG SRC="***.jpg">');
      photWin.document.write('コメント');
      photWin.document.write('</BODY></HTML>');
      photWin.document.close();
    }
    ･
    ･
    ･
  }
 //-->
</script>
こんな感じのScriptを書いておき、リンク側を
<a href="JavaScript:photdisp(1);">画像</a>
とするだけです。画像が多くなると結構大変かもしれませんが、ここの画像にHTMLを付けるよりは 遥かに楽でしょう。詳しくはこのページのソースを見てください。
Back To Index