ポップアップ･ヘルプの挿入
前回に引き続き、今回もHTML(ハイパー･テキスト)の記述例をご紹介します。文中へ注釈を加えたい場合など、一般の文章だと｢＊｣印を付けて注釈そのものは別の場所に書いたりしますが、ＨＴＭＬ文書ではマウスを当てると注釈がポップアップという立体的かつ直接的な表示方法だって可能です。それには、以前｢文字の応用｣でご紹介したパターン同様、CSSとJavaScriptの機能を組み合わせます。
まず、左の実例を見てください。本文中に３箇所ハイライトされた部分があり、そのどれかへマウスを当てると、ハイライトの色は臙脂(えんじ)から灰色に変わり、すぐ右側へ注釈がポップアップ表示されます。
ダイナミックHTMLとは？
同じHTMLHyper Text Markup Languageの略。SGML (Standard Generalized Markup Language)を基礎としたWWWの文書やレイアウトなどを設定する言語仕様。の記述でも、CSS
ポップアップ･メニュー例このための記述は、ＨＴＭＬ文書の｢ヘッダ｣と呼ばれる部分(<head>と</head>の間)、および｢ボディー｣と呼ばれる部分(<body>と</body>の間)に分かれ、ヘッダ部へ書き込むのがマウスを当てた状態のハイライトの色や注釈をポップアップ表示するウィンドウのサイズ、背景色、枠の太さや色などの情報です。
いっぽうボディー部には、注釈を付けたいそれぞれの箇所へマウスを当てる前のハイライトの色などの情報、およびポップアップ表示する注釈の内容を書き込みます。先の実例だと、以下がヘッダ部を含めた具体的な記述で、興味のあるかたはこれをそっくりWindowsのメモ帳にコピーして保存した後、エクスプローラから保存したファイル名の拡張子｢.txt｣を｢.html｣へ変更して開くと、さらに実感がつかめるでしょう。
<html>
<head>
<script>
var termColor="#ffffff"
var termBackColor="#999999"
</script>
<style type="text/css">
.explain{position:absolute; width=200;
background-color:#ffebcb;
font-size:8pt;color:#000000;
font-weight:normal;
padding:8;
border-left:1 solid #555555;
border-top:1 solid #555555;
border-right:1 solid #555555;
border-bottom:1 solid #555555;
visibility:"hidden";}
.term{background:#b00f0f; color:#ffffff; cursor:hand; font-weight:700;}
</style>
</head>
<body><body>
<font size=2><font color=#555555><b>ダイナミックHTMLとは？</b></font><br><br>
同じ<span class="term" onmouseover="this.style.backgroundColor=termBackColor; this.style.color=termColor; exp1.style.visibility='visible'" onmouseout="this.style.backgroundColor=''; this.style.color=''; exp1.style.visibility='hidden'">HTML<span id="exp1" class="explain"><img src="../../images/info.gif" align=left>Hyper Text Markup Languageの略。SGML (Standard Generalized Markup Language)を基礎としたWWWの文書やレイアウトなどを設定する言語仕様。</span></span>の記述でも、<span class="term" onmouseover="this.style.backgroundColor=termBackColor; this.style.color=termColor; exp2.style.visibility='visible'" onmouseout="this.style.backgroundColor=''; this.style.color=''; exp2.style.visibility='hidden'">CSS<span id="exp2" class="explain"><img src="../../images/info.gif" align=left>Cascading Style Sheetの略。HTLMの見栄えを良くするためのスタイルシートを記述する言語仕様。</span></span>の機能と<span class="term" onmouseover="this.style.backgroundColor=termBackColor; this.style.color=termColor; exp3.style.visibility='visible'" onmouseout="this.style.backgroundColor=''; this.style.color=''; exp3.style.visibility='hidden'">JavaScript<span id="exp3" class="explain"><img src="../../images/info.gif" align=left>Netscape Communications社が開発したクライアントサイドのスクリプト言語で、もともとはLiveScriptと呼ばれたいた。</span></span>の機能を組み合わせることで、さらに高度なデザインが可能となり、これをMicrosoft社およびNetscape Communications社ではダイナミックHTMLと呼んでいます。</font>
</body>
</html>この記述例を参考に、ご自分のＨＴＭＬ文書へ注釈を付け加えてみると、アイデア次第であなたのホームページは見違えるほど引き立つはずです。ただ、ここで一つだけお断りしておきますが、CSSもJavaScriptもMicrosoft社とNetscape Communications社では規格が異なるため、上記の実例はインターネット･エクスプローラのみでしか機能しません。
ＰＣであれマックであれ、もしインターネット･エクスプローラでご覧になっているとすれば、冒頭の実例が右図の左上の状態で表示され、文中２番目のハイライトへマウスを当てた時は、その下の表示に変わるはずです。
▼ ▼ ○ インターネト･エクスプローラの場合 × ネットスケープの場合 ところが、ネットスケープだと右図の右上のとおり、インターネット･エクスプローラだと表示されないはずの注釈が最初からすべて表示されてしまいます。注釈で隠れていない唯一のハイライト部分へマウスを置くと、その下のようにハイライトの色が変わるものの、これでは意味がありませんからご注意ください。
したがって、インターネット･エクスプローラを前提として先の記述例を説明すると、ヘッダ部へは２つのスクリプトが書き込まれており、JavaScriptの部分(<script>と</script>の間)で指定しているマウスを当てた状態のハイライト部分の文字と背景色は、６桁のアルファベットか数字を書き換えることで変更できます。同じく、CSSの部分(<style>と</style>の間)で指定しているのが、１行目から順にポップアップ･ウィンドウの幅→背景色→フォント･サイズと色→フォントの太さ→周辺の間隔→左枠の幅と色→上枠の幅と色→右枠の幅と色→下枠の幅と色→ウィンドウの非表示です。
次にボディー部では、文中の注釈を加えたい部分へ、それぞれハイライトを付けたり、マウスを当てた時に表示される注釈の内容などを書き込みます。先の記述例で臙脂(えんじ)、緑、青の３色で色分けしてあるのが、それぞれの注釈への記述です。パターンはどれも変わらず、よく見ると<span>タグの機能が注釈を加えたいキーワードの前後で２重に使われているとお気づきでしょう。そして、３つとも基本的なパターンとしては、
<span 属性>キーワード<span 属性>注釈</span></span>
こうなります。同じ<span>タグを使っていてもキーワード(先の記述例で太字の部分)の前後で性格が異なり、直前の<span>タグの役割はその属性を使ってキーワードへマウスを当てた場合と離した場合で何を表示するかといった機能面の指定です。それに対し、直後<span>タグはポップアップ･ウィンドウへ表示するＨＴＭＬ文書の内容、つまり注釈(先の記述例で下線を引いた部分)の指定にすぎません。したがって、記述例からヘッダ部のスクリプトとボディー部のスクリプトの１つをまるまるご自分のＨＴＭＬ文書へコピーし、キーワードと注釈の部分だけを書き換えれば、コンピュータのことを知らないかたでも立派に機能します。
なお、ポップアップ･ウィンドウ内(注釈の部分)へは他のページとのリンクを張ることも可能ですから、上記のポップアップ･ヘルプを少しアレンジすればポップアップ･メニューに早変わりというわけです。そのあたりが詳しく知りたいかたへは、次の機会に改めてご紹介したいと思いますので、ご期待ください。
＊興味があるかたは、｢Yokochinのハイパーテキスト･マニュアル｣の｢スタイルシート(CSS)との組み合わせ｣も、ご参照いただけます。
|
お断り