Next: 9. 表
Up: HTML文書作成マニュアル Ver 5.11
Previous: 7. 色指定
8. 画像
HTMLにおけるリンク(6 参照)は、画像を含めファイルでありさえすればどのようなものでもかまわないため、.xbm、.gif、.jpg、.xpm、.tiff、.mpgといった各種拡張子を持つ画像ファイルを扱うことができます。実際にファイルをどう表現するかは、ブラウザによりけりです。リンクではなく、ページ内に挿入(インラインイメージ)したいときには、GIF(.gif拡張子)やJPEG(.jpg拡張子)の2つのフォーマットの画像ファイルに絞られるでしょう。ブラウザによってはTIFF(.tiff拡張子)やPNG(.png拡張子)のフォーマットのファイルもインラインイメージで表現することができます。
画像ファイルに使われるフォーマットについて簡単に説明しておきましょう。GIFとJPEG以外はブラウザにプラグインソフトウェアを追加しない限り、インラインイメージで表現することはできないでしょう。
- BMP
- Windowsのビットマップファイルフォーマットで、最大24ビット(1600万色)の色表現が可能です。内部はRIFFというタグ構造フォーマットになっており、いくつか異なった形態のバージョンが存在します。
- CGM
- 画像をベクトルで記述したフォーマットです。製図データなどのような拡大しても汚くならないようにしたい画像に使います。
- EPS
- Adobe社のPostScriptフォーマットの簡約バージョンフォーマットです。ほかのドキュメントに挿入する画像として使いますが、TEX やページメーカーなどの特殊な環境が必要となるでしょう。
- GIF
- 米CompuServeが開発したフォーマットで、256色までの色表現が可能です。圧縮をサポートしており、単色で塗りつぶしたようなべたっとした絵に向いています。GIF87aと呼ばれる標準のフォーマットのほか、1つの色を透明にする透明化GIFや複数のGIFファイルを1つにまとめてパラパラ漫画のように実行するアニメーションGIF、粗い画像から徐々に鮮明な画像を表示するインターレースGIFといった拡張のGIF89aフォーマットもあります。現在のところ、Webでは一般的な画像フォーマットですが、GIFのアルゴリズムは特許になっており、GIFの作成ツールを作る際にはUnisys社に届けて場合によってはライセンス料を支払う必要があります。最近、UNISYSはこの方針をさらに押し進め、GIFファイルを使っているWebサイトに対して課金しようとしています。このため、GIFフォーマットは使わないほうがよいでしょう。
- JPEG
- JPEG(Joint Photographic Experts Group)が開発したフォーマットで、24ビットの色表現が可能です。強力な圧縮能力を持っています。写真などの多くの色を使った画像に向いています。粗い画像から徐々に鮮明な画像を表示するプログレッシブJPEGフォーマットもあります。
- MPEG
- MPEG(Mortion Picture Experts Group)が開発した動画フォーマットで、24ビットで動画像を圧縮します。
- PCD
- カメラのフィルムからポジを作りCDに焼きつけたPhoto CDの画像のファイルフォーマットです。
- PICT
- Macintoshの画像フォーマットです。
- PNG
- GIFの代替として開発されたポータブル画像フォーマットです。GIFの使用が危険を招くことになったことを受け、今後の標準フォーマットになるでしょう。
- PSD
- Adobe社のPhotoShopの画像フォーマットです。
- TIFF
- 最大24ビットの色表現が可能です。内部はタグ構造フォーマットになっており、さまざまなバージョンが存在します。このため、TIFFをサポートしていることをうたっている画像ソフトウェアで読めないこともあります。
- XBM
- UNIXのX Window Systemのビットマップファイルフォーマットで、白(0)と黒(1)の2色で表現します。圧縮は行わず、ファイルはテキストファイルになっています。
- XPM
- UNIXのX Window Systemのカラービットマップファイルフォーマットで、256色まで表現します。圧縮は行わず、ファイルはテキストファイルになっています。
ページ中に画像をインラインイメージとして挿入するには、imgタグを使います。
- img[Strict][Transitional]
- <img attributes...>は、srcアトリビュートで指定した画像ファイルをインラインイメージとして表示します。EMPTYタグです。attributesは次のようなものが使えます。
- align
- [Transitional][省略可]align="Justificaion"は、画像とテキスト文字の位置関係を変更します。Justificationに入れる指定値として次のようなものがあります。
- absbottom:画像の最下段はベースラインに合わされます。
- absmiddle:画像の中央はベースラインに合わされます。
- baseline:画像の最下段はベースラインに合わされます。
- bottom:画像の最下段とテキストの最下段を合わせます(デフォルト)。
- left:画像を左寄せにし、その後に続くテキストは、ブラウザ画面の右端になると折り返されます。折り返しのキャンセルにはbrタグ(4.5 参照)を使います。
- middle:画像の中央とテキストの最下段を合わせます。
- top:画像の最上段とテキストの最上段を合わせます。
- right: 画像を右寄せにし、その後に続くテキストは、画像の近くになると折り返されます。折り返しのキャンセルにはbrタグ(4.5 参照)を使います。
- alt
- [Strict][Transitional][必須]alt="text"は、Lynxのようなテキスト端末ブラウザでページを表示したときに画像の代わりとしてtextに指定した文字を表示します。ltextに何も指定しなければそこには何も表示されません。このアトリビュートを省略した場合、その部分は[IMAGE]のように表示されます。
- border
- [Transitional][省略可]border="number"は、画像の周りに枠を付けます。numberで指定したピクセル分の幅の枠が付きます。numberの値を0にすると、枠はなくなります。これを利用し、画像からのリンク(8 参照)のときに画像の周りに表示される枠を消すことができます。
- class
- [Strict][Transitional][省略可]class="cdata"は、このタグへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- dynsrc
- [省略可]dynsrc="URI"は、画像の代わりに動画を張りつけます。フォーマットとして、AVIファイルかVRMLファイルを使うことができ、〜の部分にファイル名を指定します。Internet Explorerのみ表現可能です。このアトリビュートをサポートしていないブラウザの場合、srcアトリビュートの画像が代わりに張りつけられます。このアトリビュートを使用した場合、次のアトリビュートも同時に指定できます。
- controls
- [省略可]controlsをタグにつけると、制御ボックスバーが画像の下に表示されます。
- loop
- [省略可]loop="number"は、繰り返しの回数を指定します。無限ループにする場合は、infiniteを値にします。
- loopdelay
- [省略可]loopdelay="number"繰り返し再生のインターバルの時間をミリ秒で指定します。
- start
- [省略可]start="type"は、再生開始の方法を指定します。値には次のようなものを取ります。
- fileopen:ファイル読み込み後、すぐ再生します。
- mouseover:マウスカーソルが画像の上に置かれたら再生します。
- height
- [Strict][Transitional][省略可]height="number"は、画像の縦幅を指定します。画像は自動的にこの幅に拡大あるいは縮小されます。単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の高さに対する比率になります。
- hspace
- [Transitional][省略可]hspace="number"は、画像の左右に空ける空白を指定します。単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の幅に対する比率になります。
- id
- [Strict][Transitional][省略可]id="name"は、このタグに固有のIDを振ります。
- ismap
- [Strict][Transitional][省略可]ismapは、クリッカブルマップ(8 参照)であることを指定します。
- lang
- [Strict][Transitional][省略可]lang="language"は、タグ内の言語を指定します。詳細は4.3 を参照してください。
- longdesc
- [Strict][Transitional][省略可]longdesc="URI"は、画像の説明を示したURIを指定します。
- lowsrc
- [省略可]lowsrc="URI"は、二段階の画像表示を行わせることができます。このアトリビュートで画像ファイル名を指定すると、最初にここで指定した画像ファイル(たいていは小さな大きさのもの)を読んで表示し、続いてsrc="URI"で指定された画像ファイルを読んで表示します。Netscape Navigator/Communicatorのみ表現可能です。
- onclick
- [Strict][Transitional][省略可]onclick="script"はクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- ondblclick
- [Strict][Transitional][省略可]ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeydown
- [Strict][Transitional][省略可]onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeypress
- [Strict][Transitional][省略可]onkeypress="script"はキーを押したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeyup
- [Strict][Transitional][省略可]onkeyup="script"はキーを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousedown
- [Strict][Transitional][省略可]onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousemove
- [Strict][Transitional][省略可]onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseout
- [Strict][Transitional][省略可]onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseover
- [Strict][Transitional][省略可]onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseup
- [Strict][Transitional][省略可]onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- src
- [Strict][Transitional][必須]src="URI"は、画像ファイルのURIを指定します。
- style
- [Strict][Transitional][省略可]style="cdata"は、スタイルを設定します。詳細は5 を参照してください。
- title
- [Strict][Transitional][省略可]title="titlename"は補助用タイトルを指定します。
- usemap
- [Strict][Transitional][省略可]usemap="URI"は、指定したマップデータURIを元にクリッカブルマップ(8 参照)を表示します。
- vspace
- [Transitional][省略可]vspace="number"は、画像の上下に空ける空白を指定します。単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の高さに対する比率になります。
- width
- [Strict][Transitional][省略可]width="number"は、画像の横幅を指定します。画像は自動的にこの幅に拡大あるいは縮小されます。単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の幅に対する比率になります。
alignアトリビュートの例を次に示します。
align="absbottom"
align="absmiddle"
align="bottom"
align="middle"
align="top"
align="baseline"
align="left" 折り返しのようすを見てください。abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
align="right" 折り返しのようすを見てください。abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
インラインイメージをマウスでクリックすることでリンクを実行したいときは、<a href="..."><img src="...">〜</a>のようにaタグ環境内でimgタグを使用するだけで可能です。
画像ファイルを参照できないときには、クエスチョンマークや破れたアイコンなどが代わりに表示されます。
ブラウザの背景色が灰色の場合、画像ファイルの背景色が白だと画像が浮いてしまいます。GIFフォーマットの場合、ファイル中の特定の1色を透明にする透明化GIFを使うことができます。
UNIXの場合、giftransやImageMagickといったツールを使って透明化GIFを作成することができます。どのようなツールが入っているかは、あなたの使用しているUNIXの管理者に問い合わせてください。
- giftrans
- giftrans -tcolor nameまたは#color code input.gif > output.gifの書式で、 input.gifの名前のGIFフォーマットファイルをoutput.gifの名前で、color codeで示された色の部分の色を透明にして保存します。色の指定については、7 を参照してください。
- ImageMagick
- ImageMagickは単体のツールではなく、複数のツールの集合体です。画像の変換にはconvertというツールを使います。convert -transparent color nameまたは#color code inputfile output.gifの書式で、inputfileはGIFフォーマットでなくてもかまいません。
Windowsの場合は、PhotoShopやPaintShopなどのツールで透明化GIFを作成することができます。
画像の特定の場所をマウスでクリックするとそれに応じたリンク先へ飛ぶクリッカブルマップについては目にしている方も多いでしょう。
クリッカブルマップには、Webサーバー側に設定ファイルを持つサーバーサイドクリッカブルマップと、HTMLファイル内に設定を持つクライアントサイドクリッカブルマップの2種類があります。前者は古くからある方式で、古いブラウザでも動作し、HTMLファイルを見てもどこにクリックポイントがあるかわからないようにできるというメリットがあります。しかし、サーバー側に設定がいろいろ必要となるため、ほとんどのプロバイダでは使うことができないでしょう。後者はHTMLファイルに書くだけでよいため、サーバー側になんの設定も必要ありません。現在クリッカブルマップといえばこちらのタイプになるでしょう。HTMLファイルのソースを表示するとクリックポイントの場所やリンク先URIなどが全部わかってしまうので、これは少々デメリットかもしれません。
サーバーサイドクリッカブルマップを作りたいときには、UNIXの場合、mapeditというプログラムを使うのがよいでしょう。手順は次のようになります。
- 作りたいマップ用の画像をGIFフォーマットのファイルとして用意します。
- mapedit を実行します。
- Fileメニューをクリックし、Open/Create Mapまでドラッグします。
- サーバーに合わせてNCSAかCERNかを選びます。WebサーバーにApacheを使っている場合には、NCSAに合わせます。Open MapをStyle: NCSAかStyle: CERNに変更します。
- Map Filename、Gif Filenameにそれぞれ記入します。
- OKをクリックします。
- 画像が読み込まれます。ここで、次のようなメニューを使ってクリックポイントを作ります。
- Poly
- 多角形に切り出します。左クリックを押すごとに点が定義され、中ボタンで決定します。決定後、そこをクリックしたときに呼び出されるリンク先を指定します。Rect、Circleも同じです。
- Rect
- 長方形に切り出します。左クリックで始点、中クリックで終点。
- Circle
- 円で切り出します。左クリックで中心、中クリックで半径決定。
- Delete
- 間違えた領域を消去します。
- Test
- クリックすると設定されたURI名を表示します。
- FileメニューからEdit Default URLを選び、必ず記入します。
- FileメニューからSave Mapを選択し、保存します。
- FileメニューからQuitを選択し、終了します。
- 保存したマップファイルを、Webサーバーで設定されているマップファイルを保管するディレクトリにコピーします。
- HTMLファイルの中で、<a href="マップファイル名"><img src="画像ファイル名" ISMAP></a>のように記述して、画像とマップの設定を行います。
- それぞれに対応したリンク先を用意します。
クライアントサイドクリッカブルマップは、マップ設定をHTMLファイル内で記述し、この設定を画像タグimgの中で参照します。
マップ設定環境を宣言するには、mapタグを使います。
- map[Strict][Transitional]
- <map attributes...>〜</map>の書式で、〜の中にマップ設定を記述します。nameアトリビュートにマップのID名を入れます。クリッカブルに設定された画像タグはこのIDを探してクリッカブルマップの設定とします。実際の設定はareaタグを使用します。
attributesには次のようなものが入ります。
- class
- [Strict][Transitional][省略可]class="cdata"は、このタグへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- id
- [Strict][Transitional][省略可]id="name"は、このタグに固有のIDを振ります。nameアトリビュートと同じ値を入れます。
- lang
- [Strict][Transitional][省略可]lang="language"は、タグ内の言語を指定します。詳細は4.3 を参照してください。
- name
- [Strict][Transitional][必須]name="ID name"は、この設定のIDを設定します。クリッカブル画像はこのIDを参照します。
- onclick
- [Strict][Transitional][省略可]onclick="script"はクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- ondblclick
- [Strict][Transitional][省略可]ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeydown
- [Strict][Transitional][省略可]onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeypress
- [Strict][Transitional][省略可]onkeypress="script"はキーを押したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeyup
- [Strict][Transitional][省略可]onkeyup="script"はキーを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousedown
- [Strict][Transitional][省略可]onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousemove
- [Strict][Transitional][省略可]onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseout
- [Strict][Transitional][省略可]onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseover
- [Strict][Transitional][省略可]onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseup
- [Strict][Transitional][省略可]onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- style
- [Strict][Transitional][省略可]style="cdata"は、スタイルを設定します。詳細は5 を参照してください。
- title
- [Strict][Transitional][省略可]title="titlename"は補助用タイトルを指定します。
mapタグ環境の中で、次のareaタグを使って設定を行っていきます。
- area[Strict][Transitional]
- <area attributes...>の書式で、map環境の中での設定を行います。EMPTYタグです。attributesには次のようなものが入ります。
- accesskey
- [Strict][Transitional][省略可]accesskey="Key"は、このリンクへのアクセッサキーを指定します。指定できるのは1文字です。
- alt
- [Strict][Transitional][必須]alt="text"は、テキストのみしか表示できないブラウザのときにtextで指定したテキストを表示します。
- class
- [Strict][Transitional][省略可]class="cdata"は、このタグへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
- coords
- [Strict][Transitional][省略可]coords="x1,y1,[...]"は、指定されたshapeがどの座標に相当するかを指定します。座標は左上が原点(0,0)に当たります。rectの場合、左上の位置x1,y1と右下の位置x2,y2を指定するので、coords="x1,y1,x2,y2"(それぞれの変数に数値を入れます)の形式になります。circleの場合、中心点x,yと半径rが必要なので、coords="x,y,r"の形式になります。polygonの場合、1点目x1,y1、2点目x2,y2、3点目x3,y3、…と指定していきます。最後の点と1点目の間は自動でつながるので同じ値にする必要はありません。形式はcoords="x1,y1,x2,y2,x3,y3,[x4,y4,...]"になります。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- href
- [Strict][Transitional][省略可]href="URI"は、指定された範囲がクリックされたときにジャンプするリンク先URI(6.2 参照)を指定します。hrefかnohrefのどちらかを必ず指定する必要があります。
- id
- [Strict][Transitional][省略可]id="name"は、このタグに固有のIDを振ります。
- lang
- [Strict][Transitional][省略可]lang="language"は、タグ内の言語を指定します。詳細は4.3 を参照してください。
- nohref
- [Strict][Transitional][省略可]nohrefは、指定された範囲がクリックされても無視することを意味します。hrefかnohrefのどちらかを必ず指定する必要があります。
- onblur
- [Strict][Transitional][省略可]onblur="script"はキーボードフォーカスが外れたときに実行するスクリプトを指定します。
- onclick
- [Strict][Transitional][省略可]onclick="script"はクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- ondblclick
- [Strict][Transitional][省略可]ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onfocus
- [Strict][Transitional][省略可]onfocus="script"はキーボードフォーカスを得たときに実行するスクリプトを指定します。
- onkeydown
- [Strict][Transitional][省略可]onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeypress
- [Strict][Transitional][省略可]onkeypress="script"はキーを押したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeyup
- [Strict][Transitional][省略可]onkeyup="script"はキーを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousedown
- [Strict][Transitional][省略可]onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousemove
- [Strict][Transitional][省略可]onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseout
- [Strict][Transitional][省略可]onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseover
- [Strict][Transitional][省略可]onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseup
- [Strict][Transitional][省略可]onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- shape
- [Strict][Transitional][省略可]shape="type"の値には、circle(円)、default(スタイルシートで指定したもの)、polygon(多角形)、rect (四角形)のいずれかを取ります。shapeアトリビュートを付けない場合、rectがデフォルトとなります。
- style
- [Strict][Transitional][省略可]style="cdata"は、スタイルを設定します。詳細は5 を参照してください。
- tabindex
- [Strict][Transitional][省略可]tabindex="number"は、タブキーを押したときにフォーカスがあたる順番を指定します。
- target
- [Transitional][省略可]target="name"は、hrefで指定したときのリンク先ターゲットを示します。詳細については6.2 を参照してください。
- title
- [Strict][Transitional][省略可]title="titlename"は補助用タイトルを指定します。
こうして作成されたmapタグ環境を参照するには、imgタグにusemapアトリビュートを付けます。
<img alt="〜" src="〜" usemap="…">
のような書式で、usemapにはmapタグで指定したnameアトリビュートの値を指定します。同じHTMLファイルの中にあるtestmapというマップ設定を参照するのであれば、#testmap、別ファイルmaps.htmlにある設定を参照するのであれば、maps.html#testmapのように指定します。別ファイルにしても直接そのファイルを開くことはできてしまうので、完全にクリックポイントを隠すことはクライアントサイドクリッカブルマップを使う限り不可能です。
Netscape Navigator/CommunicatorやInternet Explorerなどの先進的なブラウザでは、粗い(あるいはぼやけた)画像から徐々にオリジナルのきれいな画像に変化するインターレースGIFを表現できます。
UNIXの場合、pbmplusというツールキットやImageMagickを使ってインターレースGIFを作成することができます。
- pbmplus
- pbmplusは画像関係のツール集です。あるGIFファイルをインターレース化するには次のように行います。cat infile.gif | giftoppm | ppmtogif -interlace > outfile.gif
透明化GIFにこの処理を行うと、透明化の設定が消えてしまいます。最初にインターレース化した後、透明化を行う必要があります。
- ImageMagick
- 前述の透明化GIFのところでも説明しましたが、convertコマンドを使ってインターレースGIFを作成することが可能です。convert -interlace type inputfile output.gifの書式で、typeには、None(インターレースしない)、Line、Plane、Partitionのいずれかが入ります。Noneを除いて、順に粗いときの粒子の大きさが大きくなります。インターレースGIFを作る際には、LineまたはPlaneを使います。
透明化GIFにこの処理を行うと、透明化の設定が消えてしまいますが、convertの-transparentオプションも同時に指定することで一度に透明化とインターレース指定を行うことができます。
Windowsの場合は、PaintShopなどのツールでインターレースGIFを作成することができます。
同様の効果を持つものにプログレッシブJPEGがあります。UNIXの場合、ImageMagickのconvertコマンドでインターレースGIFを作るのと同じやり方で出力ファイル名の拡張子を.jpgにするだけでプログレッシブJPEGを作成することができます。
また、GIFのもう1つの拡張機能としてアニメーションGIFがあります。これは、複数のGIFファイルを1つにまとめて順に表示することで簡単なアニメーションを行います。
UNIXであればwhirlgifやImageMagickを使って作成することができます。
最初に同一の縦横幅のアニメーションに使う画像ファイル(GIFフォーマットがよいでしょう)を用意しておきます。扱いやすいようにa001.gif、a002.gif、a003.gifと再生する順番で連番を振ったファイル名にしておきます。
- whirlgif
- whirlgif [-o 出力ファイル名] [-loop ループ回数] [-time 間隔] file1 [ -time 間隔]] [ -trans "#rrggbb"] [file2 ...]が書式です。たとえばa[0-9]+.gif23ファイルからanimation.gifというアニメーションGIFを作成(ループ回数は無限、表示の間隔は100ns)するのであれば、whirlgif -o animation.gif -loop 0 -time 1 a[0-9]+.gifとなります。loopが0の場合、無限ループを意味します。もし、loopを指定しないと、1回限りのアニメーションになります。timeは、1/100秒単位で指定します。transには透明色にしたい色を指定します(7 参照)。
- ImageMagick
- convertコマンドでアニメーションGIFを作ることができます。convert [-delay 間隔] file 1[file2 ...] 出力ファイル名で作成することができます。-delayの単位は1/100秒です。
ドキュメント内では普通にimgタグでアニメーションGIFのファイルを指定するだけです。アニメーションGIFの中の画像ファイルには透明化されたものも使えますが、透明化をほどこしている部分には再描画が行われないので注意してください。
Next: 9. 表
Up: HTML文書作成マニュアル Ver 5.11
Previous: 7. 色指定
Kenshi Muto
平成11年9月19日