効果付ボタン/スクリプトの記述と設置方法

右のボタンは、ロールオーバー効果を利用せず、表と透過Gifでマウスポインターのonとoutの効果をつけていますので2種類のGif画像を用意する必要はありません。ただ文字挿入には透過Gif画像の作成が可能なペイントソフトを利用してください。
 ↑上のボタンの上にカーソルを合わせてください。効果が確認できます。

<注意>
1.下記のスプリクトに対応しているブラウザは現在、windows版IE、Operaです。Mozilla、Netscapeでは作動しません。

<作業>

1.HTMLファイルのソースの<HEAD>〜</HEAD>間に下記のスプリクトをコピーしてください。下記のプログラムはマウスポインターのonとoutでテーブルのカーソルの背景色を変更する記述です。

<SCRIPT language="JavaScript">
<!--
var evobj;
function cellbgcolor(bg){
evobj=event.srcElement;
if(evobj.tagName=="TR"||evobj.tagName=="TABLE"){
return
}
while(evobj.tagName!="TD"){
evobj=evobj.parentElement;
}
evobj.style.backgroundColor=bg;
}

function bgrecover(bg){
evobj.style.backgroundColor=bg;
}
//-->
</SCRIPT>

2.ボタン画像と同じ幅に指定したテーブルを任意の場所に作成してください。行数はボタンの数だけタイトルがある場合はプラス1行作成してください。またセル内の余白の設定は必ず cellpadding="0"(セル内の余白0) としてください。

※複数列を持つテーブルを作成して他の列に、ボタン以外のコンテンツを挿入する場合は列単位で幅を指定してください。

3.作成したテーブルのHTMLソース内に下記の記述をおこなってください。

bgcolor="black" onmouseover="cellbgcolor('red')" onmouseout="bgrecover('black')"

<設定色の説明>
bgcolor="black"・・・最初に表示される背景色です。
設定は"black"のところにカラーネームまたはRGB16進数(例:#000000)で任意の色を設定してください。サンプルスプリクトは黒を設定しています。

onmouseover="cellbgcolor('red')"・・・カーソルがセルの上にきたときの背景色。
設定は('red')のところにカラーネームまたはRGB16進数(例:#000000)で任意の色を設定してください。サンプルスプリクトは赤を設定しています。

onmouseout="bgrecover('black')"・・・カーソルがセルからはなれた後の背景です。
設定は('black')のところにカラーネームまたはRGB16進数(例:#000000)で任意の色を設定してください。サンプルスプリクトは黒を設定しています。

<設置場所の説明>

A.テーブルの全てのセルで効果を有効にしたい場合は

  <TBODY xxxxxxxxxx> のようにTBODYタグ内に設置してください。

--設置例------------------------------------------------
<TABLE width="90" cellpadding="0" cellspacing="0">
<TBODY bgcolor="black" onmouseover="cellbgcolor('red')" onmouseout="bgrecover('black')">
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
※テーブル内の全てのセルで効果が有効です。
--------------------------------------------------------

B.1行全てのセルで効果を有効にしたい場合は

  <TR xxxxxxxxxx> のようにTRタグ内に設置してください。

--設置例------------------------------------------------
<TABLE width="90" cellpadding="0" cellspacing="0">
<TBODY>
<TR bgcolor="black" onmouseover="cellbgcolor('red')" onmouseout="bgrecover('black')">
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
※ソースを設置した行だけ効果が有効です。
--------------------------------------------------------
C.セル単位で効果を有効にしたい場合は

  <TD xxxxxxxxxx> のようにTDタグ内に設置してください。

 ※xxxxxxxxxxは設置するソースです。

--設置例------------------------------------------------
<TABLE width="90" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD bgcolor="black" onmouseover="cellbgcolor('red')" onmouseout="bgrecover('black')"></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
※ソースを設置したセルだけ効果が有効です。
--------------------------------------------------------

4.1〜3の作業終了後に文字を記入した画像を設置して、通常通り画像にリンクを貼ってください。画像に文字を挿入する際は必ず透過Gifが作成可能なペイントソフトを利用してください。