Axel Richter: <img> innerhalb von <label> mit IE 6

Beitrag lesen

SELF-Forum

<img> innerhalb von <label> mit IE 6

Axel Richter
+1 Informationen zu den Bewertungsregeln

Hallo,

Beim Klick auf die Grafik soll die Checkbox markiert bzw. wieder demarkiert werden.

Zwei mögliche Workarounds:
1. mit JavaScript:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
 form p {margin:0; padding:0;}  
 form p * {vertical-align:middle;}  
 form label img {height:32px; width:32px;}  
</style>  
</head>  
<body>  
<form action="#" method="get">  
<p><input id="chk11" type="checkbox" name="chk11" value="v11"><label for="chk11"><img src="Beispiel.jpg" alt="Bild chk11" title="" onclick="if(this.parentNode.click)this.parentNode.click();"></label></p>  
<p><input id="chk12" type="checkbox" name="chk12" value="v12"><label for="chk12"><img src="Beispiel.jpg" alt="Bild chk12" title="" onclick="if(this.parentNode.click)this.parentNode.click();"></label></p>  
</form>  
</body>  
</html>

Ich denke, das ist selbsterklärend. Es zeigt auch, wo der Fehler des IE liegt. Das IMG-Element verkonsumiert im Normalfall die Klick-Aktion einfach, ohne sie an das LABEL-Element weiterzuleiten.

2. ohne JavaScript:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
  
<style type="text/css">  
 form p {margin:0; padding:0;}  
 form p * {vertical-align:middle;}  
 form label img {height:32px; width:32px;}  
</style>  
  
<!--[if ie]>  
<style type="text/css">  
 form label img {visibility:hidden;}  
 form label {background-image:url(Beispiel.jpg);}  
</style>  
<![endif]-->  
  
</head>  
<body>  
<form action="#" method="get">  
<p><input id="chk11" type="checkbox" name="chk11" value="v11"><label for="chk11"><img src="Beispiel.jpg" alt="Bild chk11" title=""></label></p>  
<p><input id="chk12" type="checkbox" name="chk12" value="v12"><label for="chk12"><img src="Beispiel.jpg" alt="Bild chk12" title=""></label></p>  
</form>  
</body>  
</html>

Für den IE wird das eigentliche IMG-Element unsichtbar. Sichtbar wird dadurch ein entsprechendes Hintergrundbild. Da nun das IMG nicht mehr geklickt werden kann, bekommt das LABEL-Element den Klick auch mit.

viele Grüße

Axel

Beitrag melden
+1
Informationen zu den Bewertungsregeln