■ 画像Howto

 ■ 透過GIF画像 1 

  • 透過GIF画像は、バックが透明になっている画像です。
    画像を貼り付けた時に回りに溶け込み易くHP上では多用されています。

■透過GIFアイコンは背景色に注意しましょう。

  • 透過GIFアイコンを使う際に、まず注意する事は、背景(bgcolor)の色の設定です。
  • 下の設定例を見てください。素材と背景の接点部分のギザギザが見えますか。 画像は四角いタイル(1辺の長さは1ピクセル)みたいなものにに色をつけて描いています。
    だから、曲線や斜めの線の場合は、輪郭がギザギザになってしまいます。これを綺麗に見えるようにするために、ギザギザ部分を予定されている背景の色を塗ってカバーしています。
  • 下の素材は、背景色を#336699に指定しました。左端の白背景ではそれが見えていますが、
    右端の背景色#336699では隠れていると思います。
  • 素材を貼り付けてみて、ギザギザが気になるようでしたら、背景色を変えてみてください。
bgcolor="#ffffff" bgcolor="#6699cc" bgcolor="#003366" bgcolor="#336699"



    背景画像の上に透過GIFをのせて遊んでみました。

●場面は青い空と青い海、なにが始まるのか。下のラジオボタンを押してください。
スタンバイ その1 その2 その3 その4




*上のイベントに使用した画像: 海の背景画像 
その1画像(透過GIF)その2画像(透過GIF)
その3画像(透過GIF)その4画像(透過GIF)

■海の背景画像をtable (width="500" height="225")の背景にして、
その1〜その4までの画像から好きなGIF画像を選んで、貼り付ければ出来上がりです。
下の3行をコピーし、赤文字部分を自分のパソコン用に修正してください。

    <table  background="images/****.gif" width="500" height="225">
    <tr><td>
   <img border="0" src="images/****.gif" width="500" height="225">
    </td></tr></table>