checkbox,radioボタンを画像にカスタマイズ/ユーザー補助/SolidStateEveryday

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Styled Checkboxes and Styled Radio Buttons | formStyle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="formStyle.css" />
	<script type="text/javascript" src="formStyle.js"></script>
</head>
<body id="body">

	<div><img id="formStyleTestImage" src="formStyle.gif" alt="" /></div>
	
	<form method="post" action="">
		<h3>何が好きですか？(checkbox)</h3>
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><span class="cbStyled Star"><input type="checkbox" name="cb1" value="Checkbox 1" /></span><span class="text">スター</span></td>
          <td><span class="cbStyled Tomato"><input type="checkbox" name="cb2" value="Checkbox 2" /></span><span class="text">トマト</span></td>
          <td><span class="cbStyled Orb"><input type="checkbox" name="cb3" value="Checkbox 3" /></span><span class="text">球</span></td>
          <td><span class="cbStyled"><input type="checkbox" name="cb4" value="Checkbox 4" /></span><span class="text">きらい</span></td>
        </tr>
        </table>	

		<h3>Radio Buttons</h3>
		<table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><span class="rbStyled Star"><input type="radio" name="rb1" value="Radio Button Option One" checked="checked" /></span><span class="text">スター1</span></td>
          </tr>
          <tr>
            <td><span class="rbStyled Star"><input type="radio" name="rb1" value="Radio Button Option Two" /></span><span class="text">スター2</span></td>
          </tr>
          <tr>
            <td><span class="rbStyled Star"><input type="radio" name="rb1" value="Radio Button Option Three" /></span><span class="text">スター3</span></td>
          </tr>
        </table>
	</form>

</body>
</html>

	Styled Checkboxes and Styled Radio Buttons \| formStyle

form内のcheckbox,radioボタンをグラフィック画像にカスタマイズするスクリプト。
画像を変更すれば、自分の好きなスタイルに変更できる。（オーバーとアウトの画像を用意しなくてはならない）
実装はとても簡単で、checkboxやradioの<input>タグを指定のクラス設定した<span>で囲むだけ。
イメージとしては、背景画像を設定した<span>を、<input>タグの上に表示させて、
そこをクリックしたらJavascriptで<input>にアクションを起したりしている感じ。

セット
実装
改造ポイント
レイアウト

formStyleをダウンロード

上記タブ内の製作元サイトからformStyleスクリプトをダウンロードする。
The Code> you can download a Zip of the example images, javascript file, css file and example page here.

ファイル構成

formStyle	index-pub.html
	formStyle.js
	formStyle.css
	formStyle.gif
	CheckboxChecked.gif
	CheckboxCheckedA.gif
	CheckboxCheckedB.gif
	CheckboxCheckedC.gif
	CheckboxUnchecked.gif
	CheckboxUncheckedA.gif
	CheckboxUncheckedB.gif
	CheckboxUncheckedC.gif
	RadioboxChecked.gif
	RadioboxUnchecked.gif
	eMe.gif

<head>～</head>の設定

スタイルシートとJavascriptを記述しておく。
<link rel="stylesheet" type="text/css" href="formStyle.css" />　
<script type="text/javascript" src="formStyle.js"></script>

<body>～<body>内の設定

<img src="formStyle.gif" />を適当な所に記述する。
これが一種のトリガーみたいな役目を果たしているみたい。

タグ付け

inputタグを基本のクラス指定したspanで囲むだけ。checkboxとradioだと基本のクラスが異なるから注意する。

チェックボックスの場合は、<span class="cbStyled">、 ラジオボックスの場合は、<span class="rbStyled">で囲む。

デフォルトの状態だと、スクエアに×マークの画像が表示されるようになる。
星とか球の画像に変えたい場合は、上記にクラスを追加設定する。

星のチェックボックス
<span class="cbStyled Star"><input type="checkbox" /></span>

球のチェックボックス
<span class="cbStyled Orb"><input type="checkbox" /></span>

でっかい球のラジオボタン
<span class="cbStyled BigOrb"><input type="radio" /></span>

基本的にはこれだけで実装が完了する。
でっかい球はラジオボタンにだけ対応している。

画像の種類を増やす

画像を増やすには、starとかのクラスを丸ごとコピペして新しい画像を指定してやれば良いかと思っていたが、
formStyle.cssを開いてみると素直に対応してないみたいだ。

前述のクラスは、Javascript側で特定する為のもので、スクリプトの方でformStyle.cssに記載されているクラスに変更しているみたい。

...と思ったら、そうではなかった。クラスコピペして新しい画像を設定してやればOKだった。

スターのチェックボックスを指定している箇所（formStyle.css内）

.CheckboxStar {background:url('CheckboxUncheckedB.gif') no-repeat center center;display:block;height:14px;width:14px;}
a.CheckboxUncheckedStar {background:url('CheckboxUncheckedB.gif') no-repeat center center;}
a.CheckboxCheckedStar {background:url('CheckboxCheckedB.gif') no-repeat center center;}
a.CheckboxUncheckedStar, a.CheckboxCheckedStar {display:block;width:14px;height:14px;cursor:pointer;cursor:hand;}
a.CheckboxUncheckedStar img, a.CheckboxCheckedStar img {width:14px;height:14px;display:inline;border:none;}

各クラス名の「Star」の部分を自分の好きな名前に変更してやり、画像も新しく指定すればOK。例えば、

.CheckboxTomato {background:url('CheckboxUncheckedTomato.gif') no-repeat center center;display:block;height:14px;width:14px;}
a.CheckboxUncheckedTomato {background:url('CheckboxUncheckedTomato.gif') no-repeat center center;}
a.CheckboxCheckedTomato {background:url('CheckboxCheckedTomato.gif') no-repeat center center;}
a.CheckboxUncheckedTomato, a.CheckboxCheckedTomato {display:block;width:14px;height:14px;cursor:pointer;cursor:hand;}
a.CheckboxUncheckedTomato img, a.CheckboxCheckedTomato img {width:14px;height:14px;display:inline;border:none;}

「Star」を「Tomato」に変更。
そして、<span class="cbStyled Tomato"><input type="checkbox" /></span> と書き込めば、
「SAMPLE」のように、トマトの画像が表示される。

普通なら<input>の横にテキストを書いて、選択項目にできるが、
このスクリプトの場合は、<span>がブロック要素に指定されているため出来ない。
なので、テキストの方も<span>等でマークしブロックにしてfloatでレイアウトする必要がある。もちろんインプット囲ってる<span>にもfloat設定する。

ただ問題なのは<label>でマークしても、画像に変化はないこと。
多分input自体にはチェックが入るけど、画像という視覚には変化がない。
jsのカスタマイズが必要かな。

新着記事
ページ履歴
人気ページ

縦にフェード展開するドロップダウンメニュー

感想

実装がかんたんなのがとてもうれしい。インプットを画像にするだけでかなり雰囲気変わるのにはときめいた。
例えば選択項目ごとに対応した画像をつけておけば、直感的にわかりやすいし、ユーザーに対しても親切だと思う。
遊び心もあるし、幅が広がるかも。
ただ、「選択していない状態」をわかりやすく画像で表現しなきゃマイナスかな。
サンプルのトマトはよくわからない。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。