まずは単純にボタンをはめて行きましょう。
タグは、というと（灰色の部分は無くても良いもの。形だけのものです。）
--------------------------------------------------------------------
<div align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5"><img src="ロゴの場所" width="700" height="100"></td>
</tr>
<tr>
<td width="268"> </td>
<td width="108" bordercolor="#000000"><img src="topボタンの場所" width="108" height="35"></td>
<td width="108" bordercolor="#000000"><img src="designボタンの場所" width="108" height="35"></td>
<td width="108" bordercolor="#000000"><img src="aboutボタンの場所" width="108" height="35"></td>
<td width="108" bordercolor="#000000"><img src="bbsボタンの場所" width="108" height="35"></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
</div>
--------------------------------------------------------------------
こうなる。
次に、マウスがのった時に色が変わる様に見せるには、マウスが乗ったときに画像が変わればよいのです。
これは、少々面倒くさい。
javascriptというものを使っている。
→→
「TIPS HTML、タグスタイルシート、ジャバスクリプト」参照
タグだが、<head>と</head>の間に、
--------------------------------------------------------------------
<script Language="JavaScript"><!--
function swImg(iName,str)
{
document.images[iName].src = str;
}
// --></script>
--------------------------------------------------------------------
それプラス、先ほどのタグを↓の用に書き換える。
--------------------------------------------------------------------
<div align="center">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5"><img src="ロゴの場所" width="700" height="100"></td>
</tr>
<tr>
<td width="268"> </td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img1','マウスが乗ったときのtopボタンの場所')" onMouseout="swImg('img1','通常時のtopボタンの場所')"><img src="通常時のtopボタンの場所" width="108" height="35" name="img1" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img2','マウスが乗ったときのdesignボタンの場所')" onMouseout="swImg('img2','通常時のdesignボタンの場所')"><img src="通常時のdesignボタンの場所" width="108" height="35" name="img2" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img3','マウスが乗ったときのaboutボタンの場所')" onMouseout="swImg('img3','通常時のaboutボタンの場所')"><img src="通常時のaboutボタンの場所" width="108" height="35" name="img3" border="0"></a></td>
<td width="108" bordercolor="#000000"><a href="#" onMouseover="swImg('img4','マウスが乗ったときのaboutボタンの場所')" onMouseout="swImg('img4','通常時のbbsボタンの場所')"><img src="通常時のbbsボタンの場所" width="108" height="35" name="img4" border="0"></a></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
</div>
--------------------------------------------------------------------
ただし、「a href="#"」とは、リンク先は特に指定していないが、これはリンクですよという感じの記号です。
これで完成。
こんな感じになるはずです。
「onMouseover」は確実にマスターしたいjavascriptである。
次に残りの部分を埋めていく。
次へ（テキストスペースの色づけ）
戻る |
