Effekt bei checken der checkbox?

H

harderph

Erfahrenes Mitglied
mahlzeit an alle!

Ich habe da ja eine idee bekommen (b.z.w. woanders gesehen)
Ich erstelle gerade eine admin oberfläche für mitglieder! Wenn sie auf ihr foto album gehen sehen sie ihre Fotos und darunter eine Checkbox (makierung zum löschen)!
Ich möchte jetzt so ein kleinen effect haben!
Wenn ich eine checkbox anklicke soll das foto mit einen anderen foto ersetztwerden (z.b. Zerissenes foto als makierung zum löschen)
Ich habe auch ein Button wo mit ich alle checkboxen makieren kann dann soll nämlich der selbe effect kommen!
Weiss da jemand rat?
hier mal das script zum makieren:
Code: 
var Marker = "false";

function CheckboxenAktivieren(field)
{
    if(Marker == "false")
    {
        for(i = 0; i < field.length; i++)
        {
            field[i].checked = true;
        }

        Marker = "true";
        return "Alle makiert";

    }
    else
    {
        for(i = 0; i < field.length; i++)
        {
            field[i].checked = false;
        }

        Marker = "false";
        return "Alle Makieren?";
    }
}
hier die checkbox
PHP: 
<input type="checkbox" name="checkbox[]" id="checkbox" value="<? echo $album_pic_id_id ; ?>" title="<? echo $album_pic_id_id ; ?>"/>
und das Div element wo der wechseln beim Klicken oder gesamt makieren passieren soll:
PHP: 
<div id="acc_foto_show_quat"><a href="#"><img src="profil/<? echo $acc_username; ?>/gallerie/<? echo $album_pic_id_name ; ?>/<? echo $album_pic_id_akid; ?>" alt="" height="126" border="0" /></a></div>
 
ok jetzt habe ich das ganze schon eingegrenzt: ich werde es mit background-images machen über JS!

Kleiner erfolg ist auch schon da: Wenn ich das erste foto von z.b. 22 anklicke wechseld das eigendliche bild zu einem anderen foto (im dem falle ein mülleimer), allerdings ist das auch nur das erste was geht, die anderen nicht warum und was mach ich falsch!
hier nochmal das script mit meiner änderung:
HTML: 
<script language="JavaScript">
<!--
var Marker = "false";

function CheckboxenAktivieren(field)
{
    if(Marker == "false")
    {
        for(i = 0; i < field.length; i++)
        {
            field[i].checked = true;
			//Hier soll dan eigendlich wenn jede Checkbox makiert ist auch im DIV element ein andres Bild angezeigt werden!
			document.getElementById('acc_foto_show_quat').style.backgroundImage = "url(img/foto_del.gif)"; 
			///////
        }

        Marker = "true";
        return "Alle makiert";
    }
    else
    {
        for(i = 0; i < field.length; i++)
        {
            field[i].checked = false;
        }

        Marker = "false";
        return "Alle Makieren?";
    }
}

//--></script>
Duv element ist eine ID <div id="acc_foto_show_quat"></div>
 
Hi,

IDs müssen innerhalb eines Dokuments eindeutig sein. Sind sie dennoch mehrfach vergeben, wird automatisch immer auf das erste Element zugegriffen, dass übereinstimmt.

Du könntest die IDs durchnummerieren und den Zählindex benutzen, um den gewünschten ID-String zu generieren.

Ciao
Quaese
 
Hi,

hier eine Möglichkeit, die Bilder austauscht. Ausserdem ist berücktsichtigt, dass die Bilder auch einzeln angeklickt werden können. Wichtig ist, dass die Checkboxen im Value nach dem Unterstrich die gleiche Zahl besitzen wie das Bild in seiner ID nach dem Unterstrich (Index).

Die Bilder wurden entsprechend ihrem Index im der ID in ein Array geschrieben, um beim Deaktivieren der jeweiligen Checkbox das Orginalbild wieder herstellen zu können.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var Marker = "false";
var arrBilder = new Array("bild.jpg",
                          "bild1.jpg",
                          "bild2.jpg");

function CheckboxenAktivieren(field){
  if(Marker == "false"){
    for(i = 0; i < field.length; i++){
      field[i].checked = true;
      // Löschbild anzeigen
      document.getElementById('img_'+i).src = "delete.gif";
    }

    Marker = "true";
    return "Alle makiert";
  }else{
    for(i = 0; i < field.length; i++){
      field[i].checked = false;
      // Ausgangsbild anzeigen
      document.getElementById('img_'+i).src = arrBilder[i];
    }

    Marker = "false";
    return "Alle Makieren?";
  }
}

function oneCheck(objCB){
  if(objCB.checked){
    document.getElementById("img_"+objCB.value.split("_")[objCB.value.split("_").length-1]).src = "delete.gif";
  }else{
    document.getElementById('img_'+objCB.value.split("_")[objCB.value.split("_").length-1]).src = arrBilder[objCB.value.split("_")[objCB.value.split("_").length-1]];
  }
}
 //-->
</script>
</head>
<body>
<div id="holderDiv">
  <img src="bild.jpg" id="img_0">
  <input type="checkbox" name="checkbox[]" id="checkbox_0" value="pic_0" title="pic_0" onclick="oneCheck(this);"><br>
  <img src="bild1.jpg" id="img_1">
  <input type="checkbox" name="checkbox[]" id="checkbox_1" value="pic_1" title="pic_1" onclick="oneCheck(this);"><br>
  <img src="bild2.jpg" id="img_2">
  <input type="checkbox" name="checkbox[]" id="checkbox_2" value="pic_2" title="pic_2" onclick="oneCheck(this);"><br>
</div>
<button onclick="CheckboxenAktivieren(document.getElementsByName('checkbox[]'));">CheckboxenAktivieren</button>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
also erstmal respekt an dich! und vielen dank!
Aber ich bin einfach zu blöde es bei mir einzubinden!
Du könntest mir nicht zufällig zeigen wie ich das mit Mysql anbindung machen könnte oder?
Beispiel meinete ich!
 
Morgen an alle!
Ich habe mal wieder ein Problem!
Hier im Forum habe ich ein script"wenn man auf checkbox klickt dann wechseld das bild"
Soweit geht alles!
Aber ich habe andere Pfade zum ordner von den bildern!
hier mal das was ich hier bekommen habe :
HTML: 
function oneCheck(objCB){
  if(objCB.checked){
    document.getElementById("img_"+objCB.value.split("_")[objCB.value.split("_").length-1]).src = "images/album_acc/foto_muell.png";
  }else{
    document.getElementById('img_'+objCB.value.split("_")[objCB.value.split("_").length-1]).src = arrBilder[objCB.value.split("_")[objCB.value.split("_").length-1]];
  }
}
und ich brauchte noch ein Pfad angabe zu den bildern:
HTML: 
function oneCheck(objCB){
  if(objCB.checked){
    document.getElementById("img_"+objCB.value.split("_")[objCB.value.split("_").length-1]).src = "images/album_acc/foto_muell.png";
  }else{
  <!--Hier muss noch der richtige Pfad rein nach .src= -->
    document.getElementById('img_'+objCB.value.split("_")[objCB.value.split("_").length-1]).src =<!--Hier um genau zu sein--> arrBilder[objCB.value.split("_")[objCB.value.split("_").length-1]];
  }
}
die variable arrBilder mit der DB verbunden also die ganzen bildernamen (z.b. bild1.jpg, u.s.w.) sind das!
Wenn ich ein Pfad angeben habe ging das script nicht mehr! kann mir da einer helfen
 
Moin,

wenn ich das recht sehe, müssen in den Array nicht die Dateinamen der Bilder, sondern der komplette Pfad.

Alldieweil schiebe ich dies mal in das Thema mit dem Skript, damit alle wissen, worums geht und die Lösung finden, falls sie mal dasselbe Problem haben ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück