購入ボタンを画像ボタンにする<input type="submit" name="submit" value="購入">
を下記のようにします。
<input type="hidden" name="submit" value="購入">
<input type="image" src="画像ファイルのパス/画像ファイルの名前" align="top">
を下記のようにします。
<input type="hidden" name="submit" value="購入">
<input type="image" src="画像ファイルのパス/画像ファイルの名前" align="top">
 |
|
商品タグ部分のソースコードは、下記のようになっています。太字部分を参照してください。
<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>
<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"で調整してください。
この例では、「カゴに入れる」ボタンの画像ファイル名が「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円（税込） |
＊ 上記 『いるかのペーパーウエイト』 の商品タグ部分のソースコードは下記のとおりです。
太字部分を参照してください。
<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>
個数</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="***"で、最初に表示する画像を指定します。
商品タグのソースコードは下記のとおりです。太字部分を参照してください。
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>
個数</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="画像のパス/画像の名前"> に変えます。
＊ 上記のソースは下記のとおりです。太字部分を参照してください。
<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>
<input type="hidden" name="submit" value="確認">
<input type="image" src="./bin/LKcrt_g1.gif" alt="カゴの中を見る">
</form>
この例では、src属性で、「bin」というフォルダの「LKcrt_g1.gif」という名前の画像を指定しています。
画像を２つ用意すれば、同様に、マウスがのると画像が変わるボタンになります。
＊ 上記のソースは下記のとおりです。太字部分を参照してください。
画像を２つ用意すれば、同様に、マウスがのると画像が変わるボタンになります。
<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>
<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>
■ 画像サンプル
ボタンの画像は、店舗さまのサイトのイメージにあわせてご自由にご用意ください。ファイバートリップでも、クールタイプを２パターンと、ソフトタイプを３パターンご用意させていただきました。もし、よろしかったらお使いください。
| 「カゴに入れる」ボタン | |
| クールタイプ
|
ソフトタイプ
|
|
Copyright(C) someisha Co. | |
|
「カゴの中を見る」ボタン |
|
| クールタイプ
|
ソフトタイプ
|
|
Copyright(C) someisha Co. |
|
＊ サンプル画像ご利用上のご注意
１．画像ファイルは、必ず、ご自身のＰＣに保存してからお使いください。弊社のページにリンクする形ではご使用にならないでください。
２．この画像の著作権は、(有)聡明舎に帰属します。弊社のサービスを止める場合には、店舗様のページから削除してください。
