« LionじゃなくてLeopard | メイン | 望遠レンズを買いました! »

August 11, 2006

IEだとimgタグをlabelで囲んでも動かない

FireFoxだとこんな感じで、imgタグをlabelで囲めばlabelの動きをしてくれるのですが、

<input type="radio" name="q1" value="1" id="q11" >
<label for="q11"><img src="images/hoge.gif" alt="値1" /></label>
<input type="radio" name="q1" value="2" id="q12" >
<label for="q12"><img src="images/huga.gif" alt="値2" /></label>
<input type="radio" name="q1" value="3" id="q13" >
<label for="q13"><img src="images/fuga.gif" alt="値3" /></label>

IEだと全く動作しない!imgではなくテキストだとちゃんと動くのだけど。
なので、IE用にJavaScriptで制御させる必要があります。

<!--[if IE]><script type="text/javascript">
window.onload=function(){
var lbs = document.getElementsByTagName('label');
for(var i=0;i<lbs.length;i++){
var cimgs = lbs[i].getElementsByTagName('img');
for(var j=0;j<cimgs.length;j++){
cimgs[j].formCtrlId = lbs[i].htmlFor;
cimgs[j].onclick = function(){document.getElementById(this.formCtrlId).click()};
}
}
}
</script><![endif]-->

これで、IEでも動作します。

Author nitoka : August 11, 2006 10:21 AM

TrackBack

TrackBack URL:
http://www.nitoka.net/blog/mt-tb.cgi/181

this entry refers to the following entry: IEだとimgタグをlabelで囲んでも動かない:

» form + label + img + IE from center-circle.net
IEで、はまったのでメモ。 form + label + img + IEの時は、下記のおまじないをどうぞ。 参考文... [read more]

TrackBack Date: July 23, 2008 01:00 AM

» PHP1-21:KittenAuthを実装してみる from 弱小PHPerの憂鬱
Text_CAPTCHAは味気ないし対抗技術の進歩であんまり意味がなくなってきているということで次に有望視されているのがKittenAuthやゲイツ認証なわけで... [read more]

TrackBack Date: August 27, 2008 02:28 PM

» みんなのFXレビュー from FX情報商材レビュー@みんなのFX情報商材レビュー!
FX情報商材のみんなのレビューを集めています。 [read more]

TrackBack Date: November 10, 2008 04:50 PM

Comment

Please, comment




save


 
[PR]杉並区のマンション情報