2012.11.25 [日] JSクリニックに参加してきました。
書くのが遅くなってしまいましたが、ベースキャンプ名古屋で行われた張山さん主催の「JSクリニック vol.1」に参加してきました。
参加者がJavaScriptを使用した案件でのお悩みなどを、ドクターハリーさんが解説してくれるという勉強会です。
今回は、マウスオーバーなどもできる画像を使ったチェックボックスを診断してもらいました。
自分で検索で探してきたプラグインを使用して制作をしたのですが、Internet EXPlorerでは、<label>の子要素に画像を入れられないので、それを回避しようとしてあるのですが、Internet EXPlorer9だとダブルクリックしか反応しないという怪現象が起きます。
「[jQuery]個別の画像をラジオボタンやチェックボックスにするプラグイン」RuputerFan
さらに、それを回避するためにIE9以上の場合のみ変更のスクリプトを記入しました。
$(function () {
if ($.browser.msie && $.browser.version > 8) {
$('label > img').click(function () {
$('#'+$(this).parent().attr('for') ).focus().click();
});
}
});
回避の回避でちょっと嫌な感じだったので「もっとわかりやすいプログラム」にしたいというのが希望でした。
解説していただいた内容を、復習のため自分で再度作り直してみたので、忘備録として書いておきます。
まず、htmlはlabelを使用せずpで画像をマークアップします。
checkboxも使いません。
東海三県の画像をクリックして送信
CSSは各ボタンの位置をpositionで配置してあります。
div#mainArea p img{position:absolute;
}
#aichiButton{left: 140px;
top: 251px;
z-index: 3;
}
#gifuButton{left: 80px;
top: 50px;
z-index: 2;
}
#mieButton{left: 1px;
top: 282px;
z-index: 1;
}
div#mainArea form{position:absolute;
left: 200px;
top: 550px;
}
見た目の処理と値を送る処理を別にします。まずはhover（マウスを乗せると画像が切り替わる）の処理です。
jQuery(function($) {
// Initialization
$.lm = {
init: function() {
for (func in $.lm) {
if ($.lm[func].init)
$.lm[func].init();
}
}
};
// Image hover
$.lm.hover = {
init: function() {
$('.hover')
.live('mouseover', this.enter)
.live('mouseout', this.exit)
.live('focus', this.enter)
.live('blur', this.exit)
.each(this.preload);
},
preload: function() {
this.preloaded = new Image; //Imageクラスを使用して HTMLImageElement を作成
this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_o$2");
},
enter: function() {
if (!this.src.match(/^(.+)_o(\.[a-z]+)$/) && !this.src.match(/^(.+)_a(\.[a-z]+)$/)){
this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_o$2");
}
},
exit: function() {
if (this.src.match(/^(.+)_o(\.[a-z]+)$/)){
this.src = this.src.replace(/^(.+)_o(\.[a-z]+)$/, "$1$2");
} else {
this.src = this.src.replace(/^(.+)_a(\.[a-z]+)$/, "$1$2");
}
}
};
/* onload ***********************************************/
$.lm.init();
});
画像イメージについて（HTMLImageElement）は、JavaScript プログラミング講座
カプセル化 については、jQueryをmootoolsなどの他のライブラリと干渉しないようにする方法まとめ（5509）
正規表現に関しては、
「webデザイナのタメのかんたん正規表現。
jQueryでの使い方と読み方」（がんばるデザイナ tuts!php,html5,photoshopとかがんばってみる）
にわかりやすく解説されています（感動!!）。
次にクリックされた値をvalueに当てはめます。
var img = new Image();
img.src = "img/aichi_s.gif";
jQuery(function($){
// 初期化
$("#aichi").val(""); //id="aichi"のvalueを無しにする
$("#aichiButton").click(changeCheckbox); //clickした時に関数changeCheckboxを動かす
$("#gifu").val("");
$("#gifuButton").click(changeCheckbox);
$("#mie").val("");
$("#mieButton").click(changeCheckbox);
function changeCheckbox(){
var id = $(this).attr("id").replace("Button", ""); //変数idは.attrでクリックしたオブジェクトのidを取得し.replaceでButtonを消したもの
var province = $(this).attr("alt"); //変数provinceはクリックしたimgのaltを取得したもの
if($("#" + id).val() == ""){ //valueの値が無しだったら
$(this).removeClass("hover"); //まずマウスオーバー処理を止める
if($(this).attr("src").indexOf("_o.gif") != -1){ //hover画像であれば
$(this).attr("src", $(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1_s$2")); //select画像に入れ替える※正規表現
} else { //通常画像であっても
$(this).attr("src", $(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_s$2")); //select画像に入れ替える※正規表現
}
$("#" + id).val(province); //そしてvalueに変数provinceで取得した県名を入れる
} else { //何らかの原因でvalueの値が入っていたら
$(this).attr("src", $(this).attr("src").replace(/^(.+)_s(\.[a-z]+)$/, "$1$2")); //通常画像にして ※正規表現
$(this).addClass("hover"); //後からマウスオーバー処理を止める
$("#" + id).val(""); //valueの値を無しにする
}
}
});
実際の動きは→ここ
いろいろと調べてコメントの記入をしていたら、ちょっと見づらくなってしまいましたが、コードとしてはわかりやすくなりました。張山さん、クリニック後のフォローもしていただいて、ありがとうございました。2回目も楽しみにしています！
コードの表示に「HIGHLIGHT.JS」を適用させていたら結構時間がかかってしまいました（言い訳）
