Aussehen Checkboxen ändern oder mit Bild verknüpfen

[Lenchen]

Hallo
Ich bin mal wieder bei meinem Kniffelspiel siehe hier: Kniffel - Name des Soiels wählen
Ich habe jetzt für jede Zahl einen Würfel gemalt (ich weiß, sie sind nicht so toll geworden :(, sie sind nur vorläufig ).
Wenn man jetzt mit dem Firefox oder Opera auf die Bilder klickt, wird die Checkbox "gecheckt". Das gefällt mir gut. Leider funktioniert das im IE nicht . Ich finde die Checkboxen allerdings viel zu klein, um sie so anzuklicken, das macht den Spielspaß irgendwie kaputt. Gibt es eine Möglichkeit, die Checkboxen auch im IE mit den Bildern zu verknüpfen und/oder die Checkboxen selbst zu vergrößern? Möglichst nicht mit JavaScript.
Danke

 

[_Thor_]

Gibt es eine Möglichkeit, die Checkboxen auch im IE mit den Bildern zu verknüpfen und/oder die Checkboxen selbst zu vergrößern? Möglichst nicht mit JavaScript.

Ja, das sollte gehen, wenn du das <label> dem <input> zuweist.

<label for="[COLOR=Red][B]wuerfel1[/B][/COLOR]"><img ... /></label>
<input id="[COLOR=Red][B]wuerfel1[/B][/COLOR]" ... />

So wie die <label> benutzt, ist es nicht gedacht.

 

[Lenchen]

Danke für deine Hilfe, aber leider klappt es nicht. Die Checkbox "verfärbt" sich zwar jetzt wenn man mit der maus über den Würfel klickt, aber um das Häckchen zu setzten muss man immer noch genau aus das kästchen klicken :(

 

[_Thor_]

Hab ich auch gerade festgestellt, vermutlich mal wieder typisches IE-Fehlverhalten.

Wie wäre es dann so?

<fieldset>
  <input type="checkbox" id="wuerfel1" />
  <label for="wuerfel1">&nbsp;</label>
</fieldset>

label {
  border: 1px solid black;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url('http://fantasybasteln.fa.funpic.de/Wuerfel1.png');
  vertical-align: bottom;
}

input {
  vertical-align: bottom;
}

 

[Lenchen]

Dann müsste ich 6 verschiedene Klassen definieren und mit php einbinden (ist ja immer ein anderer Würfel). Und eigentlich ist es ja keine Hintergrundgrafik, sondern sollte zum Inhalt gehören (wollte die Zahlen eigentlich ganz wegnehmen und nur die Würfel lassen mit entsprechenden alt=""-Beschriftungen)
Aber vielen Dank für deinen Ansatz, werde es bei Gelegenheit ausprobieren, jetzt lass ich es erstmal so, vielleicht fällt mir ja noch was ein, womit ich die Bilder nicht ins css auslagern muss