ほ～むぺ～じ作成講座

第４章絵で表現しよう

１：画像を張り付けよう！

画像を張り付けると、しーんとしていたページが一気に華やかになります。（画像にもよりますが・・）
なにはともあれ、これを使わない手はないので是非使いましょう。
インターネット上にはフリーの画像を公開しているところが結構あるのでそこで画像は揃います。
使用法は、src属性に画像のURIを書けばOKです。画像が重い場合、軽い画像をlowsrc属性に書き込むと先にそれが読み込まれます。
その他、たくさん属性があるのでためしてみましょう。

**▲使用例▲**
<IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 align="top"> align="top"こんな感じ。 <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 align="middle"> align="middle"こんな感じ。 <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 align="bottom"> align="bottom"こんな感じ。既定値。 <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 align="left"> align="left" <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 align="center"> align="center" <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 align="right"> align="right"文字位置に注目。 <IMG SRC="../image/hepopo2.gif" WIDTH=176 HEIGHT=62> 画像を拡大したり、 <IMG SRC="../image/hepopo2.gif" WIDTH=44 HEIGHT=16> 縮小したりもできます。 <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 ALT="ばな～～２" align="left"> 内容なども文字で入れられます。<BR clear="right"> (バナー上でカーソル待ち) <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31 BORDER="3"> 枠を付けることも可能です。 <A href="../soft/index.html"> <IMG SRC="../image/hepopo2.gif" WIDTH=88 HEIGHT=31> A要素と組み合わせてリンクも出来ます。 </A>	align="top"こんな感じ。 align="middle"こんな感じ。 align="bottom"こんな感じ。既定値。 align="left" align="center" align="right"文字位置に注目。画像を拡大したり、縮小したりもできます。内容なども文字で入れられます。 (バナー上でカーソル待ち) 枠を付けることも可能です。 A要素と組み合わせてリンクも出来ます。

２：一枚の画像で！

さて画像一枚一枚にリンクを付けていくと、たくさんの画像が必要になって読み込む方はイライラしがちです。
そういうときは全部まとめて一枚の画像にするとすっきりしていい感じです。
そこで使うのがクリッカブルマップというものです。使うのは「IMG」「MAP」「AREA」です。（AREAの代わりにAでもOK）

**▲使用例▲**
<IMG SRC="../image/hepopomap.gif" USEMAP="#HEPOPO_MAP" WIDTH=240 HEIGHT=180> <MAP NAME="HEPOPO_MAP"> <AREA SHAPE="circle" COORDS="42,42,33" HREF="../soft/index.html"> <AREA SHAPE="rect" COORDS="30,110,130,160" HREF="../html/index.html"> <AREA SHAPE="poly" COORDS="110,40,200,20,180,140" HREF="../cgi-bin/bbs.cgi"> <AREA SHAPE="default" COORDS="0,0,240,180" HREF="../indexsrc1.html"> </MAP> <IMG SRC="../image/hepopomap.gif" USEMAP="#HEPOPO_MAP" WIDTH=240 HEIGHT=180> <MAP NAME="HEPOPO_MAP"> <A SHAPE="circle" COORDS="42,42,33" HREF="../soft/index.html"></A> <A SHAPE="rect" COORDS="30,110,130,160" HREF="../html/index.html"></A> <A SHAPE="poly" COORDS="110,40,200,20,180,140" HREF="../cgi-bin/bbs.cgi"></A> <A SHAPE="default" COORDS="0,0,240,180" HREF="../indexsrc1.html"></A> </MAP>

３：まるちめでぃあ！(死語)

ここでは、音楽や動画、その他のいろいろなマルチメディアな物をページに使ってみようというものです。
主に使われているのは「EMBED要素」です。マクロメディアフラッシュのオフジェクトなども使えます。
BGMをならすときは「BGSOUND要素」も使われますが、IE専用＆使い勝手が悪い。のでやめた方がいいです。

**▲使用例▲**
<EMBED SRC="dq1field.mid" WIDTH="300" HEIGHT="45"> <NOEMBED>対応していない時はここが見えます。</NOEMBED> <BGSOUND SRC="dq1field.mid" LOOP="INFINITE" VOLUME="0" BALANCE="0">

★INDEX★