チェックボックスのチェックの部分を画像で置換するという物なら他所で見つけたのですが、私がやりたかったのは「子猫認証」なんかで画像をクリックして選んで（選択するとその画像が強調される）ぽちっと送信するというアレだったのです。因みに、アレが何をどうしているのかは全く調べていません（調べろよ！？）。
個別に画像設定したいんだ。それは最終的にPHPとかで書き出させる予定だけど。
良く考えたら、画像が大きく表示出来るならチェックボックスの部品自体はそのまま残っててもいいな！じゃあlabel要素を加工すれば事足りるじゃん。
画像の切り替えを行う事にすると、私個人の用途では画像準備が膨大な量になります（単純に2倍必要になる）。
故に、縁取り線の色だけ変化させる事にしました（例には画像を使用していません）。
勿論画像の切り替えにも応用できる筈なんですが、JavaScript内でハイフン有りのCSSプロパティを使う時には「background-image」→「backgroundImage」という具合にハイフンを除いて頭を1つ大文字にしてやらないと動かないとか、その辺りだけ注意ですね。
出力例：
window.onload=function(){
para0 = document.getElementById('check0');
para0.style.borderColor = "#cccccc";
para1 = document.getElementById('check1');
para1.style.borderColor = "#cccccc";
}
function checkBorder(id1,id2){
var obj1 = document.getElementById(id1);
var obj2 = document.getElementById(id2);
if(!obj2.checked){
obj1.style.borderColor = "#cccccc";
}else{
obj1.style.borderColor = "#000000";
}
return false;
}<style type="text/css">
label{
display:block;
height:100px;
width:100px;
border:2px solid #ffffff;
margin:1px;
}
</style>
<script src="image-checkbox.js" type="text/javascript"></script>
<form>
<label id="check0">
<input type="checkbox" value="何か値" id="c0" name="c0" onClick="checkBorder('check0','c0');">
</label>
<label id="check1">
<input type="checkbox" value="何か値" id="c1" name="c1" onClick="checkBorder('check1','c1');">
</label>
</form>素材依頼受付期間は、2010/04/01～2010/06/30です。
本業が多忙の為、申し訳ありませんが、それ以降の受付は休止致します。再開時期は未定ですが、生活が安定したら復活するつもりはあります。気長に生温くお待ちください。
（依頼ではないもやっとしたご要望については、随時承っております。どのページからでも拍手で適当に送れますし、私も適当に対処します）
© 2003 Hajime Yato.
Terms of Use written in Japanese.