2/2 お手軽ロールオーバーを作ろう！ [ホームページ作成] All About

具体的な記述方法・作成方法

それでは、具体的にどうすれば良いのかをご紹介致しましょう。

■画像

まず、画像の作成が必要ですね。ここでは「透明色」が必須ですので、画像形式はGIF形式かPNG形式になります。

代表的なブラウザでは、透明色を使ったGIF画像は問題なく表示できます。しかし、透明色を使ったPNG画像に関しては、Netscape Navigator 4.xでは対応していないため、透明色部分が黒で表示されてしまいます。ですから、できればGIF形式で作ったほうが良いでしょう。
※3.x以下では、PNG形式の画像そのものの表示も不可能です。

■HTML

さて、画像ができたらHTMLを書かなくてはなりません。とはいえ、非常に簡単ですので安心してください。

スタイルシート部：

HTMLファイルのhead要素内（<HEAD> ～ </HEAD>の中）に、次の3行を挿入して下さい。

<STYLE TYPE="text/css"><!--
   A:hover { background-color: #ffffcc; }
--></STYLE>

※「#ffffcc」の部分は、マウスを乗せた際に表示される背景色（つまり透明色はこの色に変化します）を記述します。上記の場合は、「淡い黄色（#ffffcc）」になります。
これで、リンク（画像に限らず）の上にマウスを乗せると、背景色が指定の色（上記では「淡い黄色」）に変化するようになります。

HTML部：

画像の透明色の部分にデフォルトの色を表示させるため、背景色を付けた枠で画像を囲まないといけません。リンク画像を表示させたい箇所に、次のように記述してください。

<TABLE BORDER="0" CELLSPACING="3" CELLPADDING="0">
<TR>
   <TD BGCOLOR="#ccffcc">
      <A HREF="prof.html">
         <IMG SRC="prof.gif" ... ALT="PROFILE">
      </A>
   </TD>
    <TD BGCOLOR="#ccffcc">
      <A HREF="diary.html">
         <IMG SRC="diary.gif" ... ALT="DIARY">
      </A>
   </TD>
</TR>
</TABLE>

ソースの解説：

（赤色）TABLEタグ部分：
BORDER属性とCELLPADDING属性は共に「0」を指定します。CELLSPACING属性の値は、画像を複数個並べた際の画像同士の間隔になります。「0」を指定すれば、ぴったりくっつきます。いろいろ試して好みの数値を指定して下さい。
（青色）TDタグ部分：
<TD>～</TD>が、1つの画像を囲むセルです。上記の場合、<TD>～</TD>のセットが2つありますから、画像が2つ並んで表示されることになります。実際には必要なだけ並べてください。BGCOLOR属性には、画像の透明色部分に（マウスが乗っていないときに）表示させておきたい色を指定します。
（緑色）Aタグ部分：
リンク先URLを指定します。上記の場合は、prof.htmlというファイルに飛ぶことになります。
（紫色）IMGタグ部分：
画像の表示部分です。上記ではスペースの都合で省略していますが、画像ファイル名だけでなく、画像サイズ（WIDTH属性で横幅、HEIGHT属性で高さ）も記述しておきましょう。上記の例では、prof.gifという画像ファイルを指定（SRC属性）しています。なお、ALT属性には画像が表示できなかった際の代替文字を記述しておきます。

以上で、記述は完了です。

これで、以下のように表示されます。