トップHTML & CSS > 小さい画像をクリックして大きな画像を表示させる
小さい画像をクリックして大きな画像を表示させる

1.はじめに

特に一つのページに多くの画像を載せる場合、一つ一つの画像を小さく表示しておき、 その小さい画像をクリックしたとき大きな画像が表示されるようにしたくなる。

色んな方法が知られている。 元のページはそのままで、縮小画像の近くに大きな画像がポップアップ表示されるのが望ましいが、 これには JavaScriptを使うなどが必要となり、 現在の HTML仕様の範囲では無理なようだ。

2.HTML基本仕様だけでの拡大表示[1]

ここでは、まず、HTMLだけで実現できる方法を示す。 次のように記述すると下のように縮小画像が表示される。 元の画像のサイズは 792x513 である。横幅が 300 画素に縮小されている。縦は横と同じ比率で縮小される。

<a href="../np/tsp/d493_ni10_2o3.png"><img src="../np/tsp/d493_ni10_2o3.png" width="300"/></a>
<a href="../np/tsp/pr226_ni10_2o3.png"><img src="../np/tsp/pr226_ni10_2o3.png" width="300"/></a>

この縮小画像をクリックすると元の画像がそのままのサイズで同じウィンドウに表示される(表示が新しいページに切り替わる)。 元のページに戻るためには、ブラウザのバック(元に戻る)ボタンを押す必要がある。

次のようにしたときは、新規ウィンドウ、タブ・ブラウザの場合別のタブ下に元の画像が表示される。

<a href="../np/tsp/d493_ni10_2o3.png" target="_new"><img src="../np/tsp/d493_ni10_2o3.png" width="300"/></a>
<a href="../np/tsp/pr226_ni10_2o3.png" target="_new"><img src="../np/tsp/pr226_ni10_2o3.png" width="300"/></a>

3.縮小画像のタイトルを文字列で表示する

画像にはタイトルが含まれるが、縮小画像では読めないために、それぞれの画像の上の中央にタイトルを表示するようにした。

横に並べる数が固定の場合には table タグが使えるが、画面の横幅に合わせて横に並べる数を自動調整するために、 span タグでスタイル属性で float を指定している。 styleで設定した float を解除するために次のようにしている。 spanタグではうまく解除できなかった。divタグだと問題ない。

<div style="clear:left"/>

縮小画像をクリックすると元の大きい画像が表示される。

pr226.tsp
a280.tsp
d493.tsp

[参考資料]
  1. 画像をクリックで拡大させる