用語の説明テンプレート(6): 画像を表示

このテンプレートでは、(1)文字のリンクをクリックすると画像を表示します(『HTML+JavaScript+CSS 上級テクニック集』〔ナツメ社〕に基づいて作りました。)別ウィンドウを開くことなく、レイヤーを使って画像が表示できるのはとても見やすく、たとえば用語の説明について画像を含めて説明するのに便利です。用語1もちろん説明を加えず、画像だけを表示することもできます。その場合、レイヤーのサイズを縦横10ピクセルずつにするなど、小さく設定しておくと、画像の大きさに従って余計な余白はできません。
(2)リンクを再度クリックすると画像は消えます。また、この文章のように文中にリンクがあっても一応画像を適切な位置に表示することはできます。用語2ただし、「一応」といったのは、そのためにレイヤーの縦横の大きさやら、表示枠の大きさやらをいちいち個別に指定しなければならず、長文に向く表示方法ではないようだからです。用語3初めにレイヤーを固定し、ポップアップ・ウィンドウの左上の角をウィンドウの左上隅の座標から横に「left」、縦に「top」で指定します。これを個々のリンクについて適切な位置になるように数値を微調整しなければならないのは、少々面倒な作業です。それでもともかく表示できるのは面白い。(ただし、文章を訂正して長さが変わってしまったら、再度微調整をやり直さなければなりません。) 〔2005.8〕
フラミンゴこれは画像を左に持ってきた例。ウィンドウの中で文字の位置を揃えるには、画像に「align」を指定します。
これは説明を前に持ってきた例。
コンパスと定規
凌霄花「a titile=""」を使って説明できるのは数文字程度。多少長い説明は、ポップアップ・ウィンドウの縦横の幅を適宜指定して表示します。