動的 HTML は活発に見えますが、実際には、Web 全体は依然としてほぼ静的です。もちろん、より前衛的な Web サイトの一部には以前からインタラクティブなコンテンツが含まれていましたが、そのほとんどは依然としてプラグインを使用するか、さまざまなバージョンのブラウザー用に複数のページを作成することによって実装されています。ほとんどの Web ページ制作者にとって、ページの複数のバージョンを作成したい場合でも、時間を確保するのは困難です。また、インタラクティブな効果を実現できる Web ページは通常、両方のユーザーにとって受け入れられません。作者も視聴者も。ただし、このようにする必要はありません。ここでは、低帯域幅条件下で Web ページに DHTML 効果を追加する簡単な方法を学びます。これは、画像をロードしたり、複数のページを書き込んだりする必要のないマウスオーバーの方法です。
より良いマウス キャプチャ情報
マウスオーバーは、Web 上で最も広く使用されている効果的な動的手法の 1 つであり、その理由としては、視聴者が明確で直接的なフィードバックを得ることができるためです。次のように考えてください。ハイパーテキスト リンクの上にマウスを移動すると、リンクが強調表示されたり、色が変わったり、「私はリンクです!」という表示に変わります。
これは、作成されるすべてのマウスオーバー リンクが同じであるという意味ではありません。それらは異なります。最悪の状況は、マウスオーバー リンクが Java 言語または Macromedia の Shockwave 形式などの特別な形式で実装されている場合で、その効果を確認するにはビューアがプラグインをインストールする必要があります。最良のシナリオは、マウスオーバー リンクがすべてのブラウザでサポートされる JavaScript で記述されることです。しかし、JavaScript で実装したとしても、ブラウザは 2 つの画像 (高輝度表示用と通常表示用) をロードする必要があり、帯域幅の無駄が発生します。
次に、画像をロードせずにマウスオーバー リンクを作成する DHTML を見てみましょう。唯一注意すべき点は、リンクやスタイルなどの Web ページ オブジェクトをドキュメント オブジェクト モデル (DOM) で記述できるようにするには、ブラウザで DHTML コードを開く必要があるということです。つまり、このコードは現在、Internet Explorer 4.0 でのみ動作します。ただし、Netscape の第 5 世代ブラウザ (今年末までにリリースされる予定) は DOM を完全にサポートします。また、互換性のないブラウザでマウスオーバー リンクが使用されても心配する必要はありません。ページ内の DHTML コードをサポートしていないブラウザでは、マウスオーバー リンクは無視されます。 (詳細については、後述の「Web サイトで DOM を機能させる」セクションを参照してください。)
コード
通常の Web ページは、2 つの主要な領域に分かれています。1 つはコンテンツ領域で、もう 1 つはナビゲーション領域です。マウスオーバー リンクは通常、ナビゲーション領域に表示されます。通常、強調表示されたボタンは、サイトのグラフィックやフィードバック ページなど、サイトのさまざまな領域に閲覧者を誘導するために使用されます。ボタンを使用する代わりに、通常のテキスト リンクをインタラクティブなマウスオーバー リンクに変換します。まず、
< a href="contact_us.html">
お問い合わせ
などの通常のテキスト リンクをドキュメントに挿入します。2 番目のステップでは、マウスをテキスト リンク上に移動すると、テキスト リンクの色が変更されます。 DHTML スクリプト プログラムは次のとおりです。
function rollon( ){
if (window.event.
srcElement.tagName == "A"){
window.event.srcElement.
style.color = "red";}
}
function rolloff( ){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover = rollon;
document.onmouseout
= rolloff;
< script の途中> タグを Web ページの
に挿入すると、各テキスト リンクでマウスオーバー効果をすぐに実現できます。以下では、これがどのように達成されるかを詳細に分析します。前に作成したスクリプト プログラムでは、rollon (マウスがリンク上を移動するとアクティブ化される) と rolloff (マウスがリンクから離れるとアクティブ化される) という 2 つの主要な関数を定義します。各関数は単純な 'if' ステートメントで始まります。これは、onmouseover イベントが Web ドキュメント内で呼び出されるたびに、rollon 関数がブラウザーに通知して、イベントをアクティブにするオブジェクトがアンカー タグ (window.event . srcElement.tagName == "A")。その場合、スクリプトは特別なスタイル (この場合は赤) をリンクに適用します。同様に、onmouseout イベントが発生すると、ロールオフ関数はスタイルをデフォルトの色 (color="") に戻します。
このスクリプトの最後の 2 行は、onmouseover イベントが発生したときに rollon 関数を実行し、onmouseout イベントが発生したときにマウスオーバー リンク (mouseover) 関数をオフにするようにブラウザに通知します。
半分の労力で 2 倍の結果が得られます
Internet Explorer 4.0 では、DHTML を使用してドキュメント内のすべてのオブジェクトを制御できます。当然、アンカー タグの色を変更する以外にも、さらに多くの機能を実行できます。実際、カスケード スタイル シート (CSS、W3C 標準書式仕様) の要素を、あらゆるタイプのオブジェクトまたはリソース コンポーネントに適用できます。たとえば、リンクを赤く表示するだけでなく、リンクに下線を追加または削除することもできます。
下線を削除するには、次の style 属性をページ上のすべてのアンカー タグに挿入するだけです。
style = "text-decoration: none"
このステートメントはリンクから下線を削除し、リンクを通常またはデフォルトの状態にします。 (デフォルトでは、Internet Explorer 4.0 および Navigator 4.0 ではすべてのテキスト リンクに下線が引かれます。上記のステートメントは、これらのリンクのデフォルト状態を 1 つずつ変更します。)
次に、rollon 関数の下に次のステートメントを追加します:
window.event.style。
textDecoration = "underline";
これで、定義したマウスオーバー イベントのリソースが赤色になり、下線スタイルが付きます。下線は、rolloff 関数に次のステートメントを追加することで削除できることに注意してください。
window.event.srcElement.style.
textDecoration = "none";
上記の変更関数は、簡単な DHTML の威力を示しています。画像をロードする必要はありませんが、非常に柔軟で移植性の高いコードを使用して、古いブラウザでもあらゆるドキュメントにアクセスできると言えます。このコードを入手して自分で使いこなしたい場合は、当社の Web サイト(www.windowspro.com ) にアクセスしてください。
-------------------
Edward Grossman は、 www.windowspro.com Web サイトのプロデューサーであり、哲学の博士号を取得しており、次の分野の研究に従事していました。ウェブが登場する前の哲学。彼の電子メール: [email protected]
ドキュメントの①ヘッダーに約 15 行のコードを追加するだけで、②任意の Web ページ上の通常のテキスト リンクを③インタラクティブなマウス起動リンク (マウスオーバー) に変えることができます。
------------
ダイナミック HTML (DHTML) を使用して、DOM を Web サイト上で動作させる
ことができます。オブジェクト指向プログラミングは、もはやプログラミングの専門家だけが実行できるものではなく、Web の経験者さえも行える領域になりつつあります。ページ作成者は次のことに参加できます。これは主に、ドキュメント オブジェクト モデル (DOM) のおかげです。この W3C 仕様では、ドキュメント、スタイル、リンクなど、ドキュメント内のすべてのコンポーネントをオブジェクトとして扱います。スクリプトは、ユーザー入力、ブラウザーの種類、またはサイズの変更、スタイルの変更、リンクの更新など、その他の多くの変数に基づいてこれらのオブジェクトを変更できます。
DOM はドキュメント全体を開くことができるため、Web 作成者は、ユーザーに大きなダウンロードのオーバーヘッドを強いることなく、高度にカスタマイズ可能な対話型ページを作成できます。これにより、低帯域幅のマウスオーバー リンクが有効になるだけでなく、折りたたみ可能な Web ブラウジング メニューや移動可能なページ コンポーネント (画像、テキスト ブロックなど) も有効になります。
DOM の詳細については、次のサイトを参照してください: www.w3.org/dom 、 www.microsoft.com/workshop/author/dhtml/ 、およびdeveloper.netscape.com/docs/manuals/communicator/dynhtml/。
DHTML アプリケーションの例については、 www.windowspro.comおよびwww.projectcool.comにアクセスして (Saturn をドラッグしてみてください)、「ソースの表示」を参照してください。
IE 4.0 では、ダイナミック HTML を使用して数十のオブジェクトを操作できます。詳細なリストは、 www.microsoft.comでご覧いただけます。