onclick img-src ändern funktioniert nur bei firefox

[Damiano]

hi, ich sitze gerade schon stunden an einem formular und kriege einen fehler nicht behoben.
ich habe ein hintergrundbild, wo auch das ganze formular und so drauf ist, daher habe ich ein unsichbares formular darüber gemacht. funktioniert auch alles wunderbar, jedoch die checkboxen funktionieren nur beim firefox. also ich habe ein div-layer direkt über die checkboxbilder getan mit der gleichen grösse. dort habe ich dann ein bild rein getan. anfangs ein 1px grosses transparentes gif (spacer.gif). klickt man nun auf den div layer, sollte sich das bild in ein kreuz ändern (datei heisst X.gif). nunja, funktioniert beim firefox ohne probleme, doch beim ie krieg ichs nich zu laufen. ich schreib einfach ma meine funtion hier rein und meine divs/imgs:

<script type="text/javascript">
var d1 = 0;
var d2 = 0;
var d3 = 0;
 function click(c){
  if (c==1) {
   if (d1==0){
    d1=1;
    document.getElementById('nutz_pic').src='pics/X.gif';
    document.getElementById('nutzungsb').value='1';
   } else {
    d1=0;
    document.getElementById('nutz_pic').src='pics/spacer.gif';
    document.getElementById('nutzungsb').value='0';
   }
  } else if (c==2) {
   if (d2==0){
    d2=1;
    document.getElementById('dat_pic').src='pics/X.gif';
    document.getElementById('datenschutzb').value='1';
   } else {
    d2=0;
    document.getElementById('dat_pic').src='pics/spacer.gif';
    document.getElementById('datenschutzb').value='0';
   }
  } else if (c==3) {
   if (d3==0){
    d3=1;
    document.getElementById('and_pic').src='pics/X.gif';
    document.getElementById('andreb').value='1';
   } else {
    d3=0;
    document.getElementById('and_pic').src='pics/spacer.gif';
    document.getElementById('andreb').value='0';
   }
  }
 }
</script>

<div class="check_div nutz" id="nutzungsb_div" onClick="click(1);"><img class="checkimg" id="nutz_pic" src="pics/spacer.gif" /></div>
        <div class="check_div daten" id="datenschutzb_div" onClick="click(2);"><img class="checkimg" id="dat_pic" src="pics/spacer.gif" /></div>
        <div class="check_div andre" id="andreb_div" onClick="click(3);"><img class="checkimg" id="and_pic" src="pics/spacer.gif" /></div>
        <input type="checkbox" name="nutzungsb" id="nutzungsb" value="0" class="inv_checkbox" />
        <input type="checkbox" name="datenschutzb" id="datenschutzb" value="0" class="inv_checkbox" />
        <input type="checkbox" name="andreb" id="andreb" value="0" class="inv_checkbox" /><br />

kurz erläuterung zur funktion: klickt man auf eine der 3 checkboxen, ruft man die funktion "click()" auf und übergibt ihr als wert 1, 2 oder 3, damit die funktion weiss, um welche der 3 checkboxen es sich handelt. die funktion prüft dann eben welche angeklickt wurde und prüft anschliessen ob die angeklickte checkbox schon angeklickt ist oder nicht, und zwar mit der variablen d1,d2 bzw d3. wurde sie noch nicht angeklickt(d1,d2 bzw d3 hat den wert 0) wird das bild vom spacer zum X geändert und der value der unsichtbaren formularcheckbox wird auf 1 gesetzt und die variable d1,d2 bzw d3 auf 1 gesetzt. sollte die checkbox schonmal angeklickt sein erkennt die funktion das d1,d2 bzw d3 nicht auf 0 stehen, dann stellt sie die variable wieder auf 0, stellt den img src wieder auf spacer und den value der jeweiligen checkbox auf 0.
nun die grosse frage: wieso funktioniert es nur beim firefox?^^
ich wette es is wieder irgendnen kleiner dummer fehler... aber ich sitz da jetzt echt schon stunden dran ^^
also danke schonmal im vorraus für eure hilfe
lg damiano

[Jörg Peschke]

Hallo,
Zu den Checkboxen:
Ich mag mich irren, aber ich habe sowas in Erinnerung, dass der IE Checkboxen und Radiobuttons ihre Werte nicht über "value" zuweisen kann, sondern nur über das Attribut "checked":

z.b.:
document.getElementById('nutzungsb').checked = true;
sollte gehen.

Zu dem Bild-Quelle:
Hast Du mal geguckt, ob das ganze vielleicht sogar schon funktioniert, nur das Bild einfach zu klein ist? Wenn Du am Anfang ein 1px großes Spacer.gif anzeigst, dann ist auch das Kreuz-Bild(X.gif) nur 1px groß (glaub ich zumindest).

Ansonsten: Gibt der IE eine Fehlermeldung?

Viele Grüße,
Jörg

[Der Martin]

Hi,

Ich mag mich irren, aber ich habe sowas in Erinnerung, dass der IE Checkboxen und Radiobuttons ihre Werte nicht über "value" zuweisen kann, sondern nur über das Attribut "checked":

das sind zwei Paar Stiefel, die eigentlich nichts miteinander zu tun haben. Der Zustand "aktiv" oder "inaktiv", der über die checked-Eigenschaft repräsentiert wird, hat mit dem Wert, der beim Submit übertragen werden soll (value), nichts zu tun.

document.getElementById('nutzungsb').checked = true;
sollte gehen.

Ist aber eine ganz andere Logik, zumal der OP den Zustand der Checkboxen in globalen Variablen (ts ts ts!) festhält.

So long,
 Martin

[Der Martin]

Hallo,

ich habe ein hintergrundbild, wo auch das ganze formular und so drauf ist, ...

das ist aber nicht schön: Wenn jemand, um Ladezeit zu sparen, keine Bilder anzeigen lässt, muss er blind klicken?

jedoch die checkboxen funktionieren nur beim firefox.

Das würde mich aber sehr wundern. Deine Syntax lässt mich vermuten, dass du XHTML schreibst (du schließt leere Elemente mit "/>"). In XHTML gibt es aber kein Attribut "onClick". Deine JS-Funktion dürfte also nie aufgerufen werden. Erfahrungsgemäß ist eher der IE so nachlässig, über kleine Fehler hinwegzusehen.

Weder an deinem Scriptcode noch an deinem HTML kann ich sonst technische Fehler sehen, an denen sich der IE stoßen würde. Dass der Ansatz per se nicht hasenrein ist, ist eine andere Sache. Dass man den JS-Code einfacher gestalten könnte, steht auch außer Zweifel. Aber das alles erklärt nicht den Unterschied im Verhalten von IE und FF.
Was sagen andere Browser dazu?

So long,
 Martin

[plan_B]

Hallo,

nachdem ich nun die Antworten gelesen habe, kann ich mir langsam einen Reim auf deine Konstruktion machen. Anscheinend gefallen dir die vom Browser erzeugten checkbox-Symbole nicht und möchtest sie durch eigene ersetzen.

dazu hast du die checkboxen unsichtbar gemacht ( wie? ). Kann man sie dann noch anclicken?
Ist dir bewusst, dass nur angekreuzte Inputfelder im Formular versendet werden? deine div-clicks ändern aber nicht das checked-Attribut des Inputelements.

mit der Nutzung von <label> geht alles viel einfacher.

  
label.lbl1 input {visibility:hidden;  }  
label.lbl1 img { width:16px; height:16px; margin-left:-16px;}  

  
function chg1(elem) {  
 alert("change: "+ elem.name +"  "+elem.checked);  
 var label = elem.parentNode;  
 var img = elem.nextSibling;  
 if ( img.nodeName != "IMG" ) {  
  alert(" kein img gefunden");  
 } else {  
  img.alt = elem.checked ? 'X' : ' ';  
  img.src = elem.checked ? 'pics/X.gif' : 'pics/spacer.gif';  
  elem.value= elem.checked ? 1 : 0;  // unötig ?  
 }  
}  

  
<label class="lbl1" for="nutzungsb"><input type="checkbox" name="nutzungsb" id="nutzungsb" value="0" onchange="chg1(this)" /><img src="pics/spacer.gif" alt=" " /> Nutzungsbedingungen gelesen  
</label><br/>  
  
<label class="lbl1" for="datenschutzb"><input type="checkbox" name="datenschutzb" id="datenschutzb" value="0" onchange="chg1(this)" /><img src="pics/spacer.gif" alt=" " /> Datenschutzbedingungen gelesen  
</label><br/>  

testet man das ganze jetzt mit dem IE (bei mir IE6) stellt man fest, dass der IE unsichtbare Checkboxen nicht verändert.
Legt man statt dessen die Bilder über sichtbare Checkboxen, sind die die Checkboxen wahrscheinlich noch sichtbar.

Gruß plan_B