メールフォームなどでよく使う、
「戻る」「リセット」「送信」をオリジナル画像を使う方法のメモ。
Javascriptを使ってオール解決も出来るのでしょうが、
なるべくhtml,cssでやりくり出来るものをピックアップしてます。
■基本的には・・・
formタグ内に以下を配置する。
<input type="submit" value="送信する" />
<input type="reset" value="リセット" />
<input type="button" value="< 前に戻る" onclick="history.back()" />
↓表示↓
■『送信する』を画像に。
『送信』を画像に変えるのは、割と単純。
formタグ内に以下を配置する。
<input type="image" src="画像のパス" alt="送信する">
↓表示↓ （サンプルなので動かないよ）
■『リセットする』を画像に。
送信とリセットは仲間だと思っていたのに、
リセットは送信のようには出来ない罠！
そこで登場！buttonタグ～！
<button type="reset">
<IMG src="画像のパス">
</button>
↓表示↓ （サンプルなので動かないよ）
オヤ？なんか、へんな枠線が付くね。
button タグのデフォルトで背景や枠のようなので、
スタイル設定をする。
button {
border:none; /*枠を消す*/
background-color:#ffffff; /*背景色を白に*/
}
↓表示↓ （サンプルなので動かないよ）
結局、Buttonタグの設定もあるし、
送信とリセットはペアの方が何かと美しくまとまるという持論。
<button type="submit">
<IMG src="画像のパス" width="x" height="x">
</button>
<button type="reset">
<IMG src="画像のパス" width="x" height="x">
</button>
★buttonのスタイル設定を忘れないコト！
■『前に戻る』を画像に。
単純に画像に、aタグを貼る。
<a href="javascript:history.back()">
<img src="画像のパス">
</a>
↓表示↓ （サンプルだけど動くよ・・・）
ふ～っと、こんなトコロでしょうか。
buttonタグは、画像使わずにCSSだけで
なんとか見栄え良くしたい時に便利そう。
なんかONMOUSEで影が付くし。
しかし、逆にbuttonタグは、
マウスオーバー時にマウスポインタが変わらない。
画像も変わらない。
そこが困ったちゃん。
