書くのが遅くなってしまいましたが、ベースキャンプ名古屋で行われた張山さん主催の「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("");
$("#aichiButton").click(changeCheckbox);
$("#gifu").val("");
$("#gifuButton").click(changeCheckbox);
$("#mie").val("");
$("#mieButton").click(changeCheckbox);
function changeCheckbox(){
var id = $(this).attr("id").replace("Button", "");
var province = $(this).attr("alt");
if($("#" + id).val() == ""){
$(this).removeClass("hover");
if($(this).attr("src").indexOf("_o.gif") != -1){
$(this).attr("src", $(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1_s$2"));
} else {
$(this).attr("src", $(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_s$2"));
}
$("#" + id).val(province);
} else {
$(this).attr("src", $(this).attr("src").replace(/^(.+)_s(\.[a-z]+)$/, "$1$2"));
$(this).addClass("hover");
$("#" + id).val("");
}
}
});
実際の動きは→ここ
いろいろと調べてコメントの記入をしていたら、ちょっと見づらくなってしまいましたが、コードとしてはわかりやすくなりました。張山さん、クリニック後のフォローもしていただいて、ありがとうございました。2回目も楽しみにしています！
コードの表示に「HIGHLIGHT.JS」を適用させていたら結構時間がかかってしまいました（言い訳）
