サムネイルからの画像の別ウィンドウ表示

写真だけを表示

現在見ているページのリンクから、別ウィンドウで表示するページを作るには target属性を指定するということを別のウインドウに表示で説明しました。

Javascript を使っても同様なことができます。

botan kobushi sanshuyu

target属性で新しいウィンドウでなく新しいタブで表示されるFirefoxなどのブラウザでもウィンドウに表示されます。Javascriptを使うことでそのウィンドウの大きさもコントロールできます。

このページにかかれているjavascriptは次のようなものです。

function imgwin(img){
    window.open("images/"+img, "imgwindow", "width=866,height=580");
}

bodyには次の様に書かれています。

<p>
<img src="images/botans.jpg" onclick="imgwin('botan.jpg')" alt="botan">
<img src="images/kobushis.jpg" onclick="imgwin('kobushi.jpg')" alt="kobushi">
<img src="images/sanshuyus.jpg" onclick="imgwin('sanshuyu.jpg')" alt="sanshuyu">
</p>

各imgタグにはbotans.jpgなど小さな画像がサムネイルとして表示されています。

これをクリックするとimgwinが呼び出されます。引数としてboton.jpgなど大きな画像のファイル名を渡します。

function imgwin ではそのファイル名を img という変数で受けとります。以降この function 内では img という変数を使うことができます。

window.open で新しいウィンドウを作ります。引数はコンマで区切り、1つ目はURL。2つ目はウィンドウの名前、3つ目はオプションです。ここでは画像ファイル名を直接指定していますが、imagesというフォルダに入っているので文字列を連結しています。ウィンドウの名前で表示するウィンドウを指定することができます。今回はどの写真も同じウィンドウに出すように名前を指定しています。target属性の様に"_blank"とすれば、常に新しいウィンドウを作ります。オプションはさまざまありますが、ここでは写真の大きさに合わせて幅と高さを指定しています。指定する大きさは表示領域の大きさ。Firefoxでは写真の大きさに上下左右にそれぞれ8pxの余白をとりますので、幅も高さも+16で指定しています。

window.open("URL", "ウィンドウ名", "オプション(コンマ区切り)");

このやり方のメリット

勝手にウィンドウを新しく作るのは嫌う人もいますが、今回紹介した方法はメリットもあります。

課題 ファイル名 jswin.html

javascript を使ってサムネイルから大きな画像が別ウィンドウで表示される仕組みのあるページをつくりなさい。

index.htmlからは「サムネイルから」という名前のリンクから行けるようにすること。

画像は大きな画像を使うで使った絵や、新しく書いた絵を使うこと。自作に限る。

Gimpオリジナルのxcfファイルはウェブページには使用できません。png画像への変換jpg(jpeg)画像への変換を参考にpngやjpgに変換して使用すること

サムネイルを作るときにはGimpのページの写真の縮小が参考になる

普通のページを表示

普通のページを別ウィンドウで表示する こともできます。

たとえば上のボタンで前のページの「入力された値を使う」を別ウィンドウで表示します。

これは scriptに

function pagewin(page){
    window.open(page, "sub", "width=866,height=580");
}

bodyには次の様に書かれています。

<p><span onclick="pagewin('h09a09.html')" class="btn">普通のページを別ウィンドウで表示する</span> 
こともできます。</p>

そしてcssでspanに対してボタンに見えるような指定をしています。

span.btn{
  border:outset;
  background:#f0f0f0;
  margin:4px;
  padding:2px 4px 2px 4px;
  cursor: pointer;
  }
span.btn:active{
  border:inset;
}

ただこれは普通にリンクを書けば済むことなのであまりメリットはありません。

ページをjavascriptでつくる

上に示したサムネイルから大きな写真のウィンドウを作るとき、「閉じる」のボタンや簡単な説明文をつけたり、背景色を設定したりということをするには写真それぞれにhtmlファイルをつくってサムネイルにリンクをすればよいのですが、ほとんど同じ内容ですからいちいち作るのは面倒です。

これも javascript にやらせてしまいます。ただし、ファイルはつくれません。ブラウザの管理するメモリ上につくることになります。

botan kobushi sanshuyu

script はhtmlファイル内に書かずに別のファイルに書いて読み込んでいます。それは script が < を含んでいるのでブラウザがタグと解釈してしまうのを避けるためです。

具体的には makewinx.js というファイル名にして保存し、htmlファイルのhead内に次の様に書きます。

<script type="text/javascript" src="makewinx.js"></script>

makewinx.js に書いた script は次のようなものです。

function makeimgpage(img,message){
  var wwidth  = 866;
  var wheight = 580 + 40; //40はメッセージとcloseボタンの分の追加
  var nwin = window.open("", "sub2", "width=" + wwidth + ",height=" + wheight);
  nwin.document.open();
  nwin.document.write('<!DOCTYPE html>\n');
  nwin.document.write('<html>\n');
  nwin.document.write('<head>\n');
  nwin.document.write('<meta charset="utf-8">\n');

  nwin.document.write('<style type="text/css">\n');
  nwin.document.write('body {background-color:#cccccc;}\n');
  nwin.document.write('span {cursor:pointer;padding:0 4px;background-color:#f0f0f0; border:outset;}\n');
  nwin.document.write('p.close {text-align:right;width:5em;float:right;margin:0;}\n');
  nwin.document.write('</style>\n');

  nwin.document.write('<title>'+img+'</title>\n</head>\n<body>\n');
  nwin.document.write('<p><img src="images/'+img+'" alt=""></p>\n');
  nwin.document.write('<p class="close" onclick="window.close();">');
  nwin.document.write('<span>close</span></p>\n'); 
  nwin.document.write('<p>'+message+'</p>');
  nwin.document.write('</body>\n');
  nwin.document.write('</html>\n');
  nwin.document.close();
  nwin.focus();
}

bodyには次の様に書かれています。

<p>
<img src="images/botans.jpg" onclick="makeimgpage('botan.jpg','ボタンの花です')" alt="botan">
<img src="images/kobushis.jpg" onclick="makeimgpage('kobushi.jpg','コブシの花です')" alt="kobushi">
<img src="images/sanshuyus.jpg" onclick="makeimgpage('sanshuyu.jpg','サンシュユの花です')" alt="sanshuyu">
</p>

動作の説明

ここでも各imgタグにはbotans.jpgなど小さな画像がサムネイルとして表示されています。

これをクリックするとmakeimgpageが呼び出されます。引数としてboton.jpgなど大きな画像のファイル名と、ボタンの花ですなどの説明文を渡します。

function makeimgpage ではそのファイル名を imgmessage という変数で受けとります。以降この function 内では img と massage という変数を使うことができます。

window.open で新しいウィンドウを作るのは同じですが、URLが入るべき1つ目の引数が空文字列になっています。それでウィンドウは空の容器だけ作られます。この空のウィンドウに nwin という名前をつけます。

この nwin というウィンドウのdocument(文書)を開いて、documentにhtmlの内容をwriteし(書き)、 documentをcloseします(閉じます)。このopenとcloseはウィンドウを開いたり閉じたりするのではなく、htmlの内容を書き始める事と書き終わることの宣言です。

最後にfocus()でこのウィンドウが前面出るようにしています。

writeの内容はhtmlの中身です。シングルクォート( ' )の間は文字であることを示します。wwidth, wheight, img, message の4つはシングルクォートにはさまれていないので変数だとわかります。+ は文字列の連結を表します。

行末の ¥n は改行です。htmlには不要ですが、ソースを見るときにあった方がわかりやすいので入れています。


ウェブページ(Dec.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Nov.2010 初稿