Using Images as Labels in Internet Explorer
Internet Explorer has a bug where wrapping a label around an image doesn't work the same as if you wrap it around text.
Example:
<input type="checkbox" id="a"><label for="a"><img src="..."></label>What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focus to the area. In the case of a radio button, it will select it and in the case of a checkbox, it'll alternate between the two states (checked and unchecked).
Internet Explorer, however, has a bug where clicking on an image inside a label tag does nothing. (Actually, I should say nothing useful because with radio buttons and checkboxes it looks like it tries to select the control but never does.)
What I've done is put together a quick bit of unobtrusive JavaScript to "fix" the problem. Albeit, only for people with JavaScript turned on.
window.onload = function(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
{
var a = document.getElementsByTagName("label");
for(var i=0,j=a.length;i<j;i++){
if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
{
a[i].childNodes.item(0).forid = a[i].htmlFor;
a[i].childNodes.item(0).onclick = function(){
var e = document.getElementById(this.forid);
switch(e.type){
case "radio": e.checked|=1;break;
case "checkbox": e.checked=!e.checked;break;
case "text": case "password": case "textarea": e.focus(); break;
}
}
}
}
}
}What the code does is loop through all labels on the page and checks whether the first child node is an image [1]. If it is then it attaches an onclick event handler which when run, checks to see what type of form control it's attached to and performs the expected action.
[1] While I don't have a specific need for it, it is theoretically possible to have the image not be the first child node within the label. The code would need to be expanded to locate where and how many images are inside a label and assign the event handler that way.
One additional caveat, this code would theoretically override any existing onclick event handler, so best to think about all the scenarios and plan!
Comments
Just the other day I noticed this bug, and here's a solution. How did you know? ;-)
I was reading the other day about being able to click on the labels (textual) of checkboxes to make a selection. I haven't found the javascript for it yet, but I know it's out there. http://pingomatic.com/
Actually, for text-based labels, there's no javascript necessary. IE supports them correctly. All you need to do is specify the id of the input that the label belongs to. (like in the example I gave but instead of an image, it's text). The javascript is intended only to fix a bug in IE.