購入ボタンを画像ボタンにするには

購入ボタンを画像ボタンにする

購入ボタンを画像ボタンに変えるには
マウスをのせると画像を切り替えるには
「買い物かごの中を見る」ボタンも同様に画像ボタンにできます。
画像サンプル

<input type="submit" name="submit" value="購入">
を下記のようにします。
<input type="hidden" name="submit" value="購入">
<input type="image" src="画像ファイルのパス/画像ファイルの名前" align="top">


	クリスタル文具セット価格 735円（税込）個数

ここでは、表の左側のセルに画像を、右側のセルに商品コードを挿入しています。
ソースは、下記のようになっています。青字の部分が商品コードです。太字部分を参照してください。

<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="2"><hr></td></tr>
<tr>
<td>
<img src="./bin/sample/stationery_set.gif" width="100" height="75" border="0" alt="クリスタル文具セット"></a></td>
<td align="left" valign="top">
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
クリスタル文具セット
<br>価格 735円個数<input type=text name="クリスタル文具セット&&&735" maxlength=3 size=3> <input type="hidden" name="submit" value="購入">
<input type="image" src="./bin/INcrt_g1.gif" align="top">
</form>
</td>
</tr>
<tr>
<td colspan="2"><hr></td></tr>
</table>

ボタンの名称を替える場合も、<input type="hidden" name="submit" value="購入"> を使いましたが、ボタンを画像に替える場合も同様です。
この例では、「カゴに入れる」ボタンの画像ファイル名が「INcrt_g1.gif」、この画像を「bin」というフォルダに保存していますので、src="画像ファイルのパス/画像ファイルの名前"は、src="./bin/INcrt_g1.gif"になっています。この画像ボタンの垂直方向の位置は、align属性で指定できます。align="top"、align="middle"、align="bottom"で調整してください。

■ マウスをのせると画像を切り替えるには

　下記の例では、「カゴに入れる」ボタンの上にマウスがのると、画像が切り替わります。画像を２つ用意します。青字の部分が商品コードです。太字部分を参照してください。


『いるかのペーパーウエイト』	大きさ：全長10cm・高さ5cm　重さ：750ｇガラス製価格：735円（税込）個数

『ひとでのペーパーウエイト』	大きさ：幅5cm・高さ5cm　重さ：500ｇガラス製価格：525円（税込）個数

＊　上記　『いるかのペーパーウエイト』　のソースは下記のとおりです。

<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td></tr>
<tr>
<td>
<font size="2" color="#4169e1">『いるかのペーパーウエイト』</font><br>
<img src="./bin/sample/dolphin.gif" width="100" height="75" border="0" alt="いるかのペーパーウエイト"></a></td>
<td align="left" valign="top">
<font size="2" color="#696969">大きさ：全長10cm・高さ5cm　重さ：750ｇ<br>
ガラス製<br>
価格：735円（税込）<br>
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
個数</font><input type="text" name="いるかのペーパーウエイト&&&735" maxlength=3 size=3>
<input type="hidden" name="submit" value="購入">
<input type="image" src="./bin/INcrt_g1.gif" align="top" OnMouseOver="this.src='./bin/INcrt_g2.gif'" OnMouseOut="this.src='./bin/INcrt_g1.gif'">
</form>
</td>
</tr>
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>

＊　マウスがボタン上にくると画像が変わるようにするには、javascritpを用います。
src="***"で、最初に表示する画像を指定します。
OnMouseOver="this.src='画像のパス/画像の名前'"で、マウスがボタン上にきたときに表示する画像を、OnMouseOut="this.src='画像のパス/画像の名前'"で、マウスがボタンから離れたときに表示する画像を指定します。
javascriptを無効に設定している場合は、画像は変わりません。

個数の箇所を、プルダウンメニューにしたのが、『ひとでのペーパーウエイト』です。
ソースは下記のとおりです。青太字部分を参照してください。

<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td></tr>
<tr>
<td>
<font size="2" color="#4169e1">『ひとでのペーパーウエイト』</font><br>
<img src="./bin/sample/hitode.gif" width="100" height="75" border="0" alt="ひとでのペーパーウエイト"></a></td>
<td align="left" valign="top">
<font size="2" color="#696969">大きさ：幅5cm・高さ5cm　重さ：500ｇ<br>
ガラス製<br>
価格：525円（税込）<br>
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
個数</font><select name="ひとでのペーパーウエイト&&&525">
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
</select>
<input type="hidden" name="submit" value="購入">
<input type="image" src="./bin/INcrt_g1.gif" align="top" OnMouseOver="this.src='./bin/INcrt_g2.gif'" OnMouseOut="this.src='./bin/INcrt_g1.gif'">
</form>
</td>
</tr>
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>

■　「買い物かごの中を見る」ボタンも同様に画像ボタンにできます。

<form method="POST" action="https://fibertrip.com/cgi-bin/***/***.cgi" target="blank">
<input type="hidden" name="submit" value="確認">
<input type="submit" value="買い物かごの中を見る">
</form>の太字部分、<input type="submit" value="買い物かごの中を見る">を下記に変えます。
<input type="image" src="画像のパス/画像の名前">
青太字部分を参照してください。

＊　上記のソースは下記のとおりです。

　この例では、src属性で、「bin」というフォルダの「LKcrt_g1.gif」という名前の画像を指定しています。

画像を２つ用意すれば、同様に、マウスがのると画像が変わるボタンになります。

　

＊　上記のソースは下記のとおりです。

■ 画像サンプル

ボタンの画像は、店舗さまのサイトのイメージにあわせてご自由にご用意ください。ファイバートリップでも、クールタイプを２パターンと、ソフトタイプを３パターンご用意させていただきました。もし、よろしかったらお使いください。


「カゴに入れる」ボタン
クールタイプ	ソフトタイプ
Copyright(C) someisha Co.
「カゴの中を見る」ボタン
クールタイプ	ソフトタイプ
Copyright(C) someisha Co.