JavaScriptとグラフィックの使用

インターネットの純粋主義者は、ワールドワイドウェブを主に情報を広めるための手段と考えています。その情報の多くはテキスト形式であり、どのWebブラウザでも簡単にレンダリングできます。しかし、Webの初期の頃から、グラフィックは基本的なテキストページを強化する上で重要な役割を果たしてきました。最近では、90%がグラフィックであるWebサイトを見るのは珍しいことではありません。これらのサイトは、情報の普及という厳密な概念に準拠していない可能性がありますが、確かに魅力的なサイトもあります。

私たちのほとんどは、Webページのテキストとグラフィックスのバランスをとるように努めています。グラフィックは、ページの外観と読みやすさを向上させるのに役立ちます。グラフィックの一般的な用途には、バナー、スポンサー企業からの広告、重要なテキストを強調するための色付きの箇条書きなどがあります。

JavaScriptスクリプト言語を使用して、Webページに配置するグラフィックを強化できます。JavaScriptを使用して、ページのグラフィックコンテンツを動的に制御できます。たとえば、ページの背景を午前中に表示し、午後に表示することができます。そして夜は星空の背景を使うことができます。または、JavaScriptを使用して、デジタル時計、ヒットカウンター、棒グラフなどの表示を作成できます。

今月のコラムでは、JavaScriptとグラフィックスを使用するいくつかの方法について詳しく説明します。しかし、この議論には注目すべきトピックが1つ欠けています。それは、アニメーションにJavaScriptを使用することです。その主題は、まもなく来る、それ自身のコラムに値する。

HTML画像要素を理解する

この要素は、HTMLドキュメントのグラフィックコンテンツを表すために最も一般的に使用されるタグです(最新のHTML仕様では要素が追加されていますが、Netscapeや他のほとんどのブラウザではまだサポートされていません)。初心者の場合、基本タグの構文は次のとおりです。

ここで、「url」は画像ファイル用に適切に作成されたURLです。URLは絶対URLでも相対URLでもかまいません。すべてのブラウザがグラフィックを表示するように装備されているわけではないことに注意してください。したがって、画像に問題がある場合は、画像に「代替テキスト」を含めることをお勧めします。タグ内のALT属性を使用して、代替テキストを指定します。次に例を示します。

タグを使用して作成された画像は、テキスト文字と同じように扱われるため、「インライン」と見なされます。つまり、画像にテキストを散在させることができ、ブラウザがすべてが適切に流れるように処理します。

ただし、ほとんどの画像は、それらを囲むテキストよりも背が高くなっています。ほとんどのブラウザの通常の動作は、画像の下部をそれを囲むテキストの下部と同じ高さに配置することです。別の配置が必要な場合は、この動作を変更できます。画像を表示するすべてのブラウザで理解されている最も一般的な配置の選択肢は次のとおりです。

  • bottom-テキストを画像の下部に揃えます。これがデフォルトです。
  • middle-テキストを画像の中央に揃えます。
  • top-テキストを画像の上部に揃えます。

一度に使用できる配置は1つだけです。構文は次のとおりです。

ブラウザは通常、画像を「自然なサイズ」で表示します。たとえば、画像が100ピクセル×100ピクセルの場合、ブラウザの画面にレンダリングしたときの画像の大きさです。ただし、Netscapeでは、WIDTH属性とHEIGHT属性を使用して、画像のサイズを小さくしたり大きくしたりすることができます。これらの属性の利点は、使用すると、ブラウザが画像用の空のボックスを作成し、ページ全体が読み込まれるときにボックスに画像を入力することです。これにより、その場所でグラフィックが期待されていることがユーザーに示されます。

  • または高さだけを指定すると、それに比例して画像のサイズが変わります。たとえば、正方形の画像のサイズを100ピクセルの高さと幅に指定します。元の画像が正方形でない場合は、相対的な比率でサイズが調整されます。たとえば、元の画像の幅が400ピクセル、高さが100ピクセルの場合、幅を100ピクセルに変更すると、画像の高さが25ピクセルになります。

  • 高さの両方を指定すると、画像の比率を好きなように変更できます。たとえば、400 x100ピクセルの画像を120x 120、75 x90などに変換できます。

例えば:

注意:JavaScriptと組み合わせる場合は、タグのHEIGHT属性とWIDTH属性を常に指定する 必要 があります。 そうしないと、一貫性のない結果やクラッシュが発生する可能性があります。この注意は、JavaScriptコードを含む同じドキュメントに表示されるすべてのタグに適用され ます。

画像とJavaScriptの組み合わせ

JavaScriptを使用して、HTMLドキュメントで使用される画像を拡張できます。たとえば、JavaScriptを使用して、時刻などの条件付きテスト式で選択された画像を使用してページを動的に作成できます。

実際、JavaScriptとさまざまなGIF画像を使用するJavaScriptデジタル時計アプリケーションは、Webで最も人気のあるアプリケーションの1つです。clock.htmlの例では、JavaScriptを使用して、大きな緑色のLEDの数字を使用して現在の時刻を表示しています。各桁は個別のGIFであり、JavaScriptによってつなぎ合わされて、デジタル時計の文字盤を形成します。

RussWalshが提供する数字のGIFを使用しました。Russは、適切なクレジットが与えられている限り、彼のGIFをWebページで自由に使用することを許可しています。時計には任意の数字を使用できますが、数字ごとに個別のGIFファイルを提供し、コロンと午前/午後インジケーターごとに個別のファイルを提供する必要があります。使用する数字ファイルを参照するようにclock.htmlコードを変更します。

:使用する画像の絶対URLを指定することが重要 です。そうしないと、Netscapeはグラフィックを表示しません。clock.htmlの例では、関数(pathOnly)を使用して、ドキュメントの現在のパスを抽出します。したがって、スクリプトは、ドキュメントと同じパスで画像を見つけることを想定しています。または、画像を別の場所に配置する場合は絶対URLをハードコーディングするか、ドキュメントの先頭にあるタグを使用して、使用するベースURLをNetscapeに明示的に指示することができます。

JavaScriptデジタル時計

JavaScriptデジタル時計varTemp; setClock(); function setClock(){var OpenImg = ' ' Temp = "" now = new Date(); var CurHour = now.getHours(); var CurMinute = now.getMinutes(); now = null; if(CurHour> = 12){CurHour = CurHour-12; Ampm = "pm"; } else Ampm = "am"; if(CurHour == 0)CurHour = "12" if(CurMinute <10)CurMinute = "0" + CurMinute else CurMinute = "" + CurMinute

CurHour = "" + CurHour; for(Count = 0; Count'for(Count = 0; Count <CurMinute.length; Count ++){Temp + = OpenImg + CurMinute.substring(Count、Count + 1)+ CloseImg} Temp + = OpenImg + Ampm + CloseImg}

function pathOnly(InString){LastSlash = InString.lastIndexOf( '/'、InString.length-1)OutString = InString.substring(0、LastSlash + 1)return(OutString); }

JavaScript時計

現在の時刻は次のとおりです。document.write(Temp);

クライアント側のイメージマップでJavaScriptを使用する

幸運にも、公開されたWebページを含むサーバーを制御できる場合は、サーバー側のイメージマップに手を出している可能性があります。これらは、小さなチャンクに「分析」された画像です。ユーザーが各チャンクをクリックすると、サーバーは異なるアクションに応答します。

The downside to server-side image maps is that you need a CGI program running on the server to handle the click requests. Not everyone has CGI access. Client-side image maps change that: The "intelligence" for dissecting the image and directing the user to the proper link -- based on the area of the image that was clicked -- is built into the browser. Netscape Navigator (version 2.0 and later) is one of many browsers that now support this standard.

Netscape takes the process a step further, however, letting you integrate client-side image maps with JavaScript. In an ordinary client-side image map, you are limited merely to linking to another page. If you wish, you can "link" to a JavaScript function and give your image maps even more intelligence. For instance, you might create a control panel that only lets users successfully click on an image button if some piece of information -- say a user name -- has been provided.

The anatomy of a client-side image map

Two new HTML tags are used to create client-side image maps. They are the tag, which defines the map structure, and one or more tags, which define the clickable areas within the image. To create the image map, define a tag and give the mapping a name. The syntax is:


  

You can use most any name for the map, but it should contain only alphabetical and numeric characters. The exception is the underscore, but avoid using an underscore for the first character. Next, define one or more tags that define the areas of your image. The tag takes the syntax:


  

After the last tag, use the tag to denote the end of the mapping.

The last item is the image you want to use, with a reference to the area map you've previously defined. Use the standard tag, with a new USEMAP attribute. For the USEMAP attribute, provide the name of the map. Here's an example:

This map uses an image named control.gif. The tag references the map name, which is #control (note the hash before the name). Other attributes provided with the tag are no border (BORDER=0), and the width and height of the image. When your users click on the back arrow (which is the first area defined), they are sent to the index.html page. Conversely, if they click on the contents "button" (the second area defined), they are taken to a page called toc.html. And if they click on the forward arrow, they are taken to a page called backpage.html.

Adding JavaScript to image map control

JavaScript can be used to extend the functionality of client-side image maps. For added flexibility provide the name of a JavaScript function for the HREF in the tag. Instead of jumping to some page, your JavaScript code is executed in which you can do anything you want. The trick: Use the JavaScript: protocol for the URL, and follow it with the name of the function you wish to use.

For example, suppose you want users to go back only one page in the history list when they click on the back arrow. You can use the window.history.go(-1) method to jump back one page in the user's history list. You can either provide this entire function after the JavaScript: protocol, or call a user-defined function that contains this instruction. Here are both methods:


  

or ...


  

... and elsewhere in the document:

 function goBack() { window.history.go (-1); }  

Personally, I prefer the latter method, because I often need to provide a number of JavaScript functions that I want performed. But, you can use whatever method you like best and which best fits the situation.

Following is a working example of using client-side image maps with JavaScript. The buttons display an alert box to show you that the JavaScript: URL is indeed working. The forward and back buttons also work -- assuming you have pages forward and backward in your history list. If the history list is empty (you have loaded the document into a new window, for example) then the current page remains.

Client-side image map example

Client Side Image Map Example function goBack() { alert ("Back"); window.history.go (-1); }

function goForward() { alert ("Forward"); window.history.go (1); }

function toc(){alert( "目次"); }