lHTML　音と画像 画像 '98. 2.16
l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .文字 _配置 　表 _リンク .フレ-ム 　ＣＧＩ .タグ一覧.
登録_ .音・画. .スタイル .マ-キ-. .ActiveX. 　---　 .色の名前. _色一覧
　 音・画 　 画像 　 92 　 93 　 AVI 　 音 　 JAVA 　 *** 　
画像の挿入 　 補助タグ 　 リンクのための表示 　 配置の指定 　 画像ファイル 　 備考( ファイルの大きさ )
T⇔ 画像の挿入
画面の中に、絵を表示します。

簡単な例
まず、画像ファイルを用意します。
まだ自分で用意していない場合は、他からコピーして使ってみます。
IExplore をお使いの場合は、Windows\Temporary Internet Files\ から、
Netscape をお使いの場合は、Netscape\Cache\ から、
HTML ソースファイルと同じディレクトリに、とりあえずコピーします。

ファイルの種類は、.gif か .jpg を使用します。
( IExplore は、ペイントの .bmp ファイルも表示できます。)

<IMG SRC="Big-BT_M.gif">
→
( 画像ファイル Big-BT_M.gif が、HTML ソースファイルと同じ場所にある場合。 )


T⇔ 補助タグ
<FONT COLOR="WHITE">　...必要なら、縁取りの色を指定します
<IMG
SRC="../../gazou/Big-BT_M.gif"
LOWSRC="../../gazou/Big-RNGO.gif"
WIDTH="80"
HEIGHT="60"
BORDER="0"
ALIGN="RIGHT"
ALT="ボタンの絵です。"
TITLE="ボタンの絵です。"
HSPACE="30"
VSPACE="10"
 表示する画像ファイル.
下に表示するファイル.
幅 ( 変更する場合 ).
縦幅 ( 〃 ).
縁取り幅.
表示位置＝右端.
代替文章.
　〃　( IExplore のみ )
左右の余白.
上下の余白.
>
</FONT>　　※　縁取りの色(=文字の色)は Netscape のみ
 <FONT COLOR=WHITE> ボタンの絵です。
</FONT>

このページを再描画すると、
下の絵が見えます。
　( Netscape3.0 )
下の絵だけ表示されます。
　( Netscape4.0 )
下の絵は表示されません。
　( IExplore )
画像ファイル　:　表示する 画像ファイル名を書きます。
下の画像ファイル　:　この絵が先に表示されます。( Netscape3.0 のみ。)
　　上の絵ですぐ上書きされます。( 再描画すると確認できます。)
　　絵の大きさは、先に表示される下の絵の大きさになります。
　　例えば　. . . 大きな絵の場合に、先にモノクロ画像を表示する。
　　Netscape4.03 では、下の絵を指定すると、上の絵は表示されません。
幅　:　画像の大きさを変更したい場合に、目的の幅を指定します。
縦幅　:　　〃　高さを指定します。
縁取り幅　:　縁取りが必要な場合に、その幅を指定します。
　　絵を リンク用に使う場合は、指定を省略すると、幅２の縁取りが描かれます。
表示位置　:　表示位置を指定します。
　　指定しなければ、絵は一個の文字と同じような扱い形は違いますが、文字と同じに配置できます。で表示されます。
　　LEFT　:　絵を左端に配置します。同じ高さに複数行の文章を配置できます。
　　RIGHT　:　絵を右端に配置します。　〃
　　TOP　:　絵の上端に合わせて、１行を配置します。
　　MIDDLE　:　絵の中央高さに合わせて、１行を配置します。
　　BOTTOM　:　絵の下端に合わせて、１行を配置します。( デフォルト )
　　絵の高さに表示する文章は、絵のコードの後に書きます。
　　複数行配置を途中で中止するには、<BR>ではなく <BR CLEAR="ALL"> と書きます。
代替文章　:　( 絵が表示できないブラウザでは、この文章が表示されます。)
　　マウスを持って行くと、この文章がポップアップ表示されます。( IExplore, Netscape4.0 )
　　絵の表示に時間がかかる場合や、絵の意味を説明するために使用できます。


T⇔ リンクのために表示する例
<A HREF="bih-h_g1.htm"><IMG SRC="../../gazou/Big-BT_G.gif"></A>
　→　
<A HREF="bih-h_g1.htm"><IMG SRC="../../gazou/Big-BT_G.gif" BORDER="0"></A>

T⇔ 配置の指定
画像 は一個の文字と同じように配置できます。
補助タグ ALIGN を使うと、特別な配置ができます。

下記の表示例は、(前の文章)の直後に画像のコードが書いてあります。
<IMG SRC="../../gazou/Big-BT_G.gif" ALIGN="BOTTOM">
( 前の文章 ) 下 ( デフォルト )<BR>

<IMG SRC="../../gazou/Big-BT_G.gif" ALIGN="TOP">
( 前の文章 ) 上<BR>

<IMG SRC="../../gazou/Big-BT_G.gif" ALIGN="MIDDLE">
( 前の文章 ) 中央<BR>

<IMG SRC="../../gazou/Big-BT_G.gif" ALIGN="RIGHT"><BR>
( 前の文章 ) 右<BR>
右<BR>
右<BR CLEAR="RIGHT">
右(次)<BR>
CLEAR=RIGHT の代りに、CLEAR=ALL と書くことができます。

<IMG SRC="../../gazou/Big-BT_G.gif" ALIGN="LEFT"><BR>
( 前の文章 ) 左<BR>
左<BR>
左<BR CLEAR="LEFT">
左(次)<BR>
CLEAR=LEFT の代りに、CLEAR=ALL と書くことができます。

T⇔ 画像ファイルについて

WWWブラウザに絵(や写真)を表示するためには、表示する絵を用意します。
.gif や、.jpg のファイルは、ほとんどのブラウザで表示できます。
IExplore は、ペイントブラシを使って描いた .bmp のファイルも表示できます。

ビットマップ画像は、Windows 付属のペイントブラシで作成きます。

色の作成 ( 基本色 )
１．パレットの、変更したい色の部分をクリックします。
　→ その色が選択されます。
２．[オプション]メニューの[色の設定]をクリックします。
　→ [色の設定]ダイアログが現れます。
３．基本の色の中から、目的の色を選択し、ＯＫをクリックします。
　→ 最初に 選択しておいた色が、その色に変ります。

色の作成 ( 任意の色 )
１．パレットの、変更したい色の部分をクリックします。
　→ その色が選択されます。
２．[オプション]メニューの[色の設定]をクリックします。
　→ [色の設定]ダイアログが現れます。
３．[色の作成]をクリックします。
　→ 色の設定ダイアログが拡大され、色の一覧が表示されます。
４．[作成した色]の、色を配置したい部分をクリックします。( ここに色が保存されます。)
５．基本の色の中から、目的に近い色を選択します。
　　( 必要ではありませんが、選択が楽になります。)
　→ 色の一覧の中で、その色が選択され、見本の色が表示されます。
６．色と明るさを選択します。( ４の操作をしていないときは、最初白が選択されています。)
７．[色の追加]をクリックします。
　→ [作成した色]の、あらかじめ選択しておいた位置に、色が追加されます。
※　他の色も作成する場合は、上記３〜６を繰返します。
８．パレットにおきたい色を、[作成した色]の中から選択します。
９．ＯＫをクリックします。
　→ 最初に 選択しておいた色が、その色に変ります。

※　[色の設定]ダイアログは、他のプログラムでも使用されます。
　　ペイントで利用できるのは、[色の設定]ダイアログの機能の一部だけです。

ビットマップの種類
１．白黒 ( 一色 = 1 ビット )　...２色のカラーパレットデータを含みます。
２．16 色 ( 一色 = 4 ビット )　...16 色の 〃
３．256 色 ( 一色 = 8 ビット )　...256 色の 〃
４．1677 万色 ( 一色 = 24 ビット )　...カラーパレットはありません。

新規作成したときは、保存するまでは 種類は未定です。
どの種類にするのかは、[ファイル]メニューで[保存]するときに指定できます。
保存すると、種類が決定されるので、他の種類用のパレットは使用できなくなります。

ビットマップの種類を変更するには新規作成画像にコピーします。
１．種類を変更したいビットマップを開きます。
２．[編集]メニューの[すべて選択]をクリックします。
　→ 絵全体が点線の四角で囲まれます。
３．[編集]メニューの[コピー]をクリックします。
　→ ビットマップはクリップボードにコピーされます。
４．ファイルメニューの[新規作成]をクリックします。
　→ 新規作成画面になります。
５．[編集]メニューの[貼り付け]をクリックします。
　→ 現在の画面に、元の絵がコピーされます。( これは、元の絵とは違う新しい絵です。)
６．[ファイル]メニューの[名前を付けて保存]をクリックします。
　→ 名前を付けて保存のダイアログが現れます。
７．目的の[ファイルの種類]を選択します。
８．ファイルの一覧の中から、元のファイルを選択します。
　→ [ファイル名]の窓に、選択したファイルの名前がコピーされます。
９．[保存]をクリックします。
　→ 上書きの確認メッセージが表示されます。
１０．[はい]をクリックします。
　→ 指定した種類のビットマップとして保存されます。

ビットマップをホームページに表示するには
絵を表示したいページのソースファイルに、
<IMG SRC="ABC.bmp">
のように記述します。
絵の保存場所(ディレクトリ)をソースファイルと別な場所にした場合には、ファイル名とともにディレクトリ名も指定します。
　 次のように記述した場合には、ABC の部分をクリックするとペテントブラシが起動して ABC.bmp が表示されます。
<A HREF="C:\HTML\ABC.bmp">ABC</A> 　...自分でテストするとき。
インターネットエクスプローラ3.0以外のブラウザでも表示されるようにするには、画像変換ソフトを使って絵を変換します。
画像変換ソフトには、
Leonardo Haddad Loureiro(MMedia Research)氏の Lview31.exe(フリーソフト)
同じく Lviewp1b.exe (シェアウェア)
タスカの GIX.exe(シェアウエア)などがあり、雑誌の CD-ROM 付録やインターネットなどから入手できます。

Lview31.exe について。
BMP, GIF, JPG などの画像ファイルを、編集／変換できます。
画像に文字を挿入したり、色合いを細かく変更できます。
メモ　:　画像を変換する場合。
　１.ファイルを開きます。
　　(File→Open→ファイルの種類／ドライブ／ディレクトリ→OK)
　２．色合いを調節します。
　　この操作をしないと、変換ファイルが保存されない場合があります。
　３．保存します。　(File→SaveAs→ )

以下、'97 現在。
タスカの日本語版ホームページ　http://www.tocka.com/indexj.html
注 : GIX は、Windowsフォルダに tocka.ini というファイルを作るので、削除するときはこれも削除します。

シェアウエアは、代金を支払う前に試しに使って見ることができます。

パソコンの画面をコピーして画像ファイルにするソフトには、西村氏の CoodTool(ランチャー) ver6.0 に付属している CoodZoom などがあります。
CoodTool は、次の場所から入手できます。
NIFTY　(Windowsアクセサリーフォーラム)FWINF　8WINDOWS software(デスクトップ環境)　622 KHE01230 96/11/16　185856 COODTOOL.LZH
PC-VAN　SIG WINDOWS　7.0SL　9.実用ソフトウェア　708.COODTOOL.DOC COODTOOL.LZH
注 : 新しいバージョンのものには画面を拡大表示する機能しかありません。
VisualC のプロフェッショナル版にも画面のズーム／コピープログラムが付属しています。

 GIG 動画を作るには、　( '98. 2 現在 )
「はっとりワールド」http://www.asahi-net.or.jp/~zb8n-httr/
の服部氏が、現バージョンはフリーの、変換ソフトを提供されています。


備考（ファイルの大きさ）
以下に、画面に表示される情報と、その情報量の例を示します。

　 情報 データの情報量＋(データを指定するタグの情報量。)
画像 RNGO.gif 背景透明化  1,281 Byt ＋(　21　Byt )＝1,302　Byt
RED.bmpの代りに、Big-RED.jpgで表示しています。 画像 RED.bmp 下の原画　 1,286 Byt ＋(　21　Byt )＝1,307　Byt
画像 MIX.gif 白透明化 882 Byt ＋(　21　Byt )＝903　Byt
画像 MIX.jpg 680 Byt ＋(　21　Byt )＝701　Byt
RED.jpg 画像 RED.jpg 521 Byt ＋(　21　Byt )＝542　Byt
Ｘ 着色した表(大きさは自由) 　 ｘ Byt ＋(　47　Byt )
あああ 着色文字 あああ 2×3 Byt ＋(　22　Byt )＝28 Byt
■ 着色文字　■ 2 Byt ＋(　22　Byt )＝24　Byt
あ 文字 あ 2 Byt ＋(　0　Byt )＝2　Byt
　A 半角英数文字 A 1 Byt ＋(　0　Byt )＝1　Byt
このように、文字に比べて絵はとても大きな情報になります。
通信速度 28.8Kbps のモデムは、１秒間に 3,600Byt(28,800Bit) の情報を送信 または受信します。

上記のビットマップファイルは、255色の例です。
同じ大きさのビットマップなら、普通は 色数が少ないほど少ない情報量になります。
ただし、点のような小さな画像では、カラーパレットがない分 24 ビット画像( 1677.7万色 ) が一番小さくなります。


 T
　　mtoga@sannet.ne.jp 　 登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html