ショッピングカート購入ボタンを画像ボタンにする

 購入ボタンを画像ボタンに変えるには

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

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

商品タグ部分のソースコードは、下記のようになっています。太字部分を参照してください。
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank"> クリスタル文具セット
<br>価格 735円 個数<input type=text name="クリスタル文具セット&&&735" value="" maxlength="3" size="3"> <input type="hidden" name="submit" value="購入">
<input type="image" src="./bin/INcrt_g1.gif" align="top">

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

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

 下記の例では、「カゴに入れる」ボタンの上にマウスがのると、画像が切り替わります。
画像を2つ用意します。

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

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

 上記 『いるかのペーパーウエイト』 の商品タグ部分のソースコードは下記のとおりです。 太字部分を参照してください。
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
個数</font><input type="text" name="いるかのペーパーウエイト&&&735" value="" 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'" alt="カゴに入れる">

</form>
 マウスがボタン上にくると画像が変わるようにするには、javascritpを用います。
src="***"で、最初に表示する画像を指定します。

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

個数の箇所を、プルダウンメニューにしたのが、『ひとでのペーパーウエイト』です。
商品タグのソースコードは下記のとおりです。太字部分を参照してください。
<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'" alt="カゴに入れる">

</form>

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

<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="画像のパス/画像の名前"> に変えます。


 上記のソースは下記のとおりです。太字部分を参照してください。
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
<input type="hidden" name="submit" value="確認">
<input type="image" src="./bin/LKcrt_g1.gif" alt="カゴの中を見る">
</form>
 この例では、src属性で、「bin」というフォルダの「LKcrt_g1.gif」という名前の画像を指定しています。
画像を2つ用意すれば、同様に、マウスがのると画像が変わるボタンになります。


 上記のソースは下記のとおりです。太字部分を参照してください。
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
<input type="hidden" name="submit" value="確認">
<input type="image" src="./bin/LKcrt_g1.gif" OnMouseOver="this.src='./bin/LKcrt_g2.gif'" OnMouseOut="this.src='./bin/LKcrt_g1.gif'" alt="カゴの中を見る">
</form>


 画像サンプル

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

「カゴに入れる」ボタン
クールタイプ

カゴに入れる黄色 カゴに入れるグレー

カゴに入れる黄色 カゴに入れるグレー

ソフトタイプ

カゴに入れる緑色 カゴに入れるピンク カゴに入れる青色

カゴに入れる緑色 カゴに入れるピンク カゴに入れる青色

Copyright(C) someisha Co.

「カゴの中を見る」ボタン
クールタイプ

カゴの中を見る黄色 カゴの中を見るグレー

カゴの中を見る黄色 カゴの中を見るグレー

ソフトタイプ

カゴの中を見る緑色 カゴの中を見るピンク カゴの中を見る青色

カゴの中を見緑色る カゴの中を見るピンク カゴの中を見る青色

Copyright(C) someisha Co.

 サンプル画像ご利用上のご注意

1.画像ファイルは、必ず、ご自身のPCに保存してからお使いください。弊社のページにリンクする形ではご使用にならないでください。

2.この画像の著作権は、(有)聡明舎に帰属します。弊社のサービスを止める場合には、店舗様のページから削除してください。


メールフォームもファイバートリップ

サービス管理メニュー


サービス案内