lHTML 音と画像 画像 '98. 2.16
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .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 では、下の絵を指定すると、上の絵は表示されません。
 : 画像の大きさを変更したい場合に、目的の幅を指定します。
縦幅 :  〃 高さを指定します。
縁取り幅 : 縁取りが必要な場合に、その幅を指定します。
  絵を リンク用に使う場合は、指定を省略すると、幅2の縁取りが描かれます。
表示位置 : 表示位置を指定します。
  指定しなければ、絵は一個の文字と同じような扱い形は違いますが、文字と同じに配置できます。で表示されます。
  LEFT : 絵を左端に配置します。同じ高さに複数行の文章を配置できます。
  RIGHT : 絵を右端に配置します。 〃
  TOP : 絵の上端に合わせて、1行を配置します。
  MIDDLE : 絵の中央高さに合わせて、1行を配置します。
  BOTTOM : 絵の下端に合わせて、1行を配置します。( デフォルト )
  絵の高さに表示する文章は、絵のコードの後に書きます。
  複数行配置を途中で中止するには、<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.パレットの、変更したい色の部分をクリックします。
 → その色が選択されます。
2.[オプション]メニューの[色の設定]をクリックします。
 → [色の設定]ダイアログが現れます。
3.基本の色の中から、目的の色を選択し、OKをクリックします。
 → 最初に 選択しておいた色が、その色に変ります。

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

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

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

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

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

ビットマップをホームページに表示するには
絵を表示したいページのソースファイルに、
<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 などの画像ファイルを、編集/変換できます。
画像に文字を挿入したり、色合いを細かく変更できます。
メモ : 画像を変換する場合。
 1.ファイルを開きます。
  (File→Open→ファイルの種類/ドライブ/ディレクトリ→OK)
 2.色合いを調節します。
  この操作をしないと、変換ファイルが保存されない場合があります。
 3.保存します。 (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
着色した表(大きさは自由)   x 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 のモデムは、1秒間に 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