小窓による画像の表示の仕方

 ホームページに画像がある時,縮小した画像(サムネイル)を表示し,それをクリックすると大きな画像になるようにページをリンクさせることがあります。

 この時,写真のページは別ウインドウで開く方が,画像を閲覧しやすくなります。

あじさい あじさい(別フレーム)

こちらの画像をクリックすると今表示しているフレームに,そのまま表示されます。(ツールバーの戻るボタンで戻ってください。)

こちらの画像をクリックすると小さい画像用ウインドウが開きます。

サムネイル画像を開く時には,画像だけのウインドウの方が「戻る」ボタンで,ページを戻す必要がなく,効果的です。別ウインドウで開く場合は,ソースに<target="_blank">を入力します。上の画像では,次のようなソースが入っています。

<a href="hydrangeamain.jpg"> <a href="hydrangeamain.jpg" target="_blank">

ホームページビルダーでもリンク設定時にターゲットとして設定できます。
 ただし,このターゲットによる表示では,ブラウザのメニューが出てしまいます。そこで,メニューなどを出さずに,画像だけ表示する場合は,JavaScriptを使います。

あじさい(別フレーム)

 左の画像はJavaScriptを使って画像用の小窓を表示させるものです。リンクしているようにカーソルの形を手にもできますが,ソースを見たときややこしくなるのでここでは,矢印カーソルのままです。ソースは下のようになっています。

リンクさせたい画像の<img>タグのあとに,onClickのアクションを入れます。

<img=「画像の情報」onClick="window.open('**.jpg','','width=##,height=\\')">
**.jpgは新しく開く画像の名前
##は新しく開くウインドウの幅
\\は新しく開くウインドウの高さになります。

このページを右クリックしてソースを見ていただけると良いと思います。