ちょっとした例

- ふきだし -

テーブルと6つ(正確には7つか)の画像でこんなことも・・・




Hello
(訳:やあ)





お侍さん


種を明かせば・・・


*
* Hello
(訳:やあ)
*
*
* *
* お侍さん
*

* 印のところ以外に画像が仕込んである.
画像は以下の7つ.
お侍さん
と,お侍さんの前に [スペーサー] 画像.

例:[MOSIR Project]

HTML Sample & Point !
<!--body の背景をふきだしと違う色にする-->
<!--画像の背景は透過色にしておくこと-->
<!--隙間が出来るので cellpadding , cellspacing の両方を "0" に指定-->
<!--テーブル全体の width , height を指定すると Netscape では, ふきだしが壊れることがある(幅・高さの分だけデータが詰まっていないと壊れる).
この対処法は,テーブル全体の幅・高さをピクセルで指定して,全てのセルについても指定する.-->
<table border=0 cellpadding=0 cellspacing=0>
<tr>

<!--隙間が出来るので,セルの width と height は画像と同じ大きさに指定-->
<!--画像の width , height も必ず指定-->
<td width=30 height=30><img src="./images/waku1.gif" width=30 height=30></td>
<!--ふきだしになるセルの背景色を白(ふきだしと同じ色)にする-->
<!--<br> は背景色をつけるためのダミー-->
<td height=30 bgcolor="#FFFFFF"><br></td>
<td width=30 height=30><img src="./images/waku2.gif" width=30 height=30></td>
</tr>
<tr>
<td width=30 height=25 bgcolor="#FFFFFF"><br></td>
<td bgcolor="#FFFFFF">
<font color="#666699">

Hello<br>(訳:やあ)
</font>
</td>
<td width=30 bgcolor="#FFFFFF"><br></td>
</tr>
<tr>
<td width=30 height=30><img src="./images/waku4.gif" width=30 height=30></td>
<td height=30 bgcolor="#FFFFFF"><br></td>
<td width=30 height=30><img src="./images/waku3.gif" width=30 height=30></td>
</tr>
<tr>
<td width=30 height=25><br></td>

<!--隙間が出来るので,セルの height は画像と同じ大きさに指定-->
<!--画像の width , height も必ず指定-->
<td height=25><img src="./images/waku5.gif" width=30 height=25></td>
<td width=30 height=25><br></td>
</tr>
<tr>
<td width=30><br></td>
<td height=89>

<!--ふきだし口の部分とお侍さんの位置がずれないようにするためのスペーサー-->
<!--スペーサーではなく,hspace (横のスペース)で固定してもよい.-->
<!--この例でお侍さんの両側を空けるとふきだしが変に大きくなってしまうので, 左側にスペーサーを置いた. (hspace は両側にスペースがつく)-->
<img src="../../images/spacer.gif" width=1 height=1 vaspce=0 hspace=10>
<img src="./images/bushi.gif" width=37 height=89 alt="お侍さん">
</td>
<td width=30><br></td>
</tr>
</table>
The copyright of image,"お侍さん" belongs to mayuRin.

[Table]