Checkboxauswahl soll auf einen Bild angezeigt werden - einfach machbar?

M

MisterMi

Erfahrenes Mitglied
Hallo,

ich habe bisher nur mit PHP gearbeitet und möchte nun gern folgende Funktion in Javascript umbauen, weil das so nicht mit PHP realisierbar ist.

Ich möchte eine Box haben mit mehreren Checkboxelementen. Der User soll eine Auswahl von Spielern vornehmen können und diese sollen dann entweder in Textform, oder besser noch mit einem dazugehörigen Foto/Bild auf einem Spielfeld (Als Bild/Foto) abgezeigt werden.

Im Pinzip stell ich mir das relativ einfach vor weil es für mich als Unwissender im Prinzip nach einer normalen Checkbox auswahl aussieht und dann sollen an bestimmten Platzhaltern auf einem Foto (Hintegrund) gewisse zu der Auswahl passende Elemente/Fotos angezeigt werden.

Gibt es einen WYDIWYG Editor mit dem das schnell und vorallem einfach realisierbar ist oder ist der Code schnell zusammengebastelt oder stell ich mir das alles zu einfach vor?

Vielen Dank für die Hilfe ;)
 
Das ist relativ einfach mit jQuery realisiertbar. Damit wir dir aber helfen können poste mal dein HTML Grundgerüst (Also die Checkbox und der/die Platzhalter wo das Foto angezeigt werden soll.
 
PHP: 
  if ( ! $db_Tor )
{
  die('Ungültige Abfrage: ' . mysql_error());
}

while ($zeile = mysql_fetch_array( $db_Tor, MYSQL_ASSOC))
{
  echo '<input type="checkbox" name="spieler[]" value="'. $zeile['spieler'] . '" />' . $zeile['spieler'] . ' - ' . number_format($zeile['marktwert'],  0, ',', '.') . ' € - ' . $zeile['verein'] . ' - ' . $zeile['punkte'] . ' Punkte<br/>';
}
mysql_free_result( $db_Tor );

echo '</h5></td>';
echo '<td align="left" valign="top" width="350" height="1000"><h5>';

echo '<p><b><font size="+3">Abwehr:</font></b><br />';

  if ( ! $db_Abwehr )
{
  die('Ungültige Abfrage: ' . mysql_error());
}

while ($zeile = mysql_fetch_array( $db_Abwehr, MYSQL_ASSOC))
{
  echo '<input type="checkbox" name="spieler[]" value="'. $zeile['spieler'] . '" />' . $zeile['spieler'] . ' - ' . number_format($zeile['marktwert'],  0, ',', '.') . ' € - ' . $zeile['verein'] . ' - ' . $zeile['punkte'] . ' Punkte<br/>';
}
mysql_free_result( $db_Abwehr );

Also die Funktion erzeugt die derzeitigen Checkboxen. Aber im Prinzip hätte ich mir da eher eine Scrollbox oder sowas zum aufklappen vorgestellt.
Das Grundgerüst mit dem Bild ist nicht vorhanden, weil ich nicht wusste ob das überhaupt so einfach geht. Aber im Prinzip wäre es ja erst einmal nur ein per HTML eingebundenes Bild als Hintergrund.
 
Also zumindest was die Scrollbox (die man auch auf- und zuklappen kann) angeht, da habe ich dir hier bereits einen Lösungsvorschlag gezeigt.

Da du dich bisher nicht zu diesem Vorschlag geäußert hast, ist jetzt halt die Frage ob das was für dich ist oder nicht!?


Wie soll das bei den Bildern laufen.
Soll einfach der nächste "freie" Platz bebildert werden oder soll ein Spieler auf eine bestimmte Position gesetzt werden? Wie sind die Bilder benannt, sind es einfach die Spielernamen?
 
Ja die Scrollbox ist so schon einmal nicht schlecht.
Die Bilder sind nach Vor und Nachname der Spieler benannt und daher zuordbar.
Sie sollten entweder per Drag und Drop auf die richtigen Stellen gezogen werden oder Anhand ihrer Eigenschaft "Position" Entweder ins Tor ins Mittelfeld usw... von links nach rechts eingeordnet werden.
 
MisterMi:
Ich habe um ein HTML Gerüst gefragt und du lieferst PHP. Klar, daraus wird das HTML generiert. Wir sind hier aber im Javascript Forum und wenn ich dir helfen soll will ich nicht zuerst PHP Code ausführen um dann die HTML Struktur zu bekommen. Ausserdem sollte dir ja klar sein dass selbst wenn ich diesen Aufwand auf mich nehmen würde ich das gar nicht kann, da ich die Datenbank und Datensätze dazu nicht habe.

Also helfe uns dir zu helfen und poste die HTML Struktur (am besten gleich in einem Tool wie: http://jsfiddle.net/).
 
Ich habe leider keine relevante HTML Struktur. Die notwendigen Daten liegen alle in einer Datenbank aber sind ja zuerst nicht relevant. Die Frage zielte ja darauf ab, wie ich das ganze aufbaue bzw. wo ich die Drag&Drop Funktion + Placeholder herbekomme und ob es sowas als Vorlage gibt oder eben ein einfaches Programm.
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
*********************************
     Loginsystem 1.0 Beta
          Powered by
     www.mirkolinho.de
*********************************
-->

<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
<meta name="author" content="Mirkolinho - www.mirkolinho.de"/>
<meta name="generator" content="www.mirkolinho.de"/>
<title>Willkommen im Save</title>

<style type="text/css">
html, body{
        background:                url('http://www.bilder-hochladen.net/files/big/oqp-ds-e1e3.jpg');
        margin:                        0;
        padding:                0;
        color:                        #000;
        font-family:        Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

div.login{
        width:                        300px;
        border:                        1px #666 solid;
        border-radius:        12px;
        margin:                        auto;
        background:                #f0f0f0;
        margin-top:                15%;
        padding:                10px;
    box-shadow:                         1px 1px 4px rgba(0, 0, 0, 0.1),
                                               -1px 1px 4px rgba(0, 0, 0, 0.1),
                                        1px -1px 4px rgba(0, 0, 0, 0.1),
                                               -1px -1px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:                 1px 1px 4px rgba(0, 0, 0, 0.1),
                                               -1px 1px 4px rgba(0, 0, 0, 0.1),
                                        1px -1px 4px rgba(0, 0, 0, 0.1),
                                               -1px -1px 4px rgba(0, 0, 0, 0.1);
          -webkit-box-shadow:         1px 1px 4px rgba(0, 0, 0, 0.1),
                                               -1px 1px 4px rgba(0, 0, 0, 0.1),
                                        1px -1px 4px rgba(0, 0, 0, 0.1),
                                               -1px -1px 4px rgba(0, 0, 0, 0.1);
}

.txt{
        width:                        90%;
        outline:                0;
        border:                        1px #aaa solid;
        padding:                3px 5px 3px 5px;
}

.txt:hover .txt:focus{
        border:                        1px #111 solid;
}

input.button{
        padding:                3px;
        padding-left:        8px;
        padding-right:        8px;
}

.cursor{
        cursor:                        pointer;
}

.label{
        font-size:                12px;
}

a{
        color:                        #000;
        font-family:        Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
        text-decoration:underline;
}

a:hover{
        text-decoration:none;
        color:                        #444;
}

a.login{
        padding-left:        24px;
}

/* Save */

div.main{
        width:                        1500px;
        margin:                        auto;
}

div.header{
        width:                        100%;
        height:                        200px;
        background:                url('http://www.bilder-hochladen.net/files/big/oqp-dv-7d04.png') #efefef repeat-x scroll center center;
        border:                        1px #666 solid;
        border-bottom:        0;
}

div.menu{
        width:                        100%;
        height:                        40px;
        border:                        1px #666 solid;
        background:                #efefef;
        border-top:                0;
}

div.body{
        width:                        1480px;;
        min-height:                400px;
        border:                        1px #666 solid;
        border-top:                0;
        background:                #efefef;
        padding:                10px;
}

a.menu{
        color:                        #000;
        display:                block;
        padding:                10px 10px 0px 10px;
        text-decoration:none;
        background:                #fff;
        border-right:        1px #666 solid;
        min-width:                100px;
        height:                        30px;
        text-align:                center;
        float:                        left;
}

a.menu:hover{
        background:                #2bb0ed;
}

div.welcome_user{
        width:                        99%;
        text-align:                right;
        height:                        25px;
        margin-top:                125px;
}

table.profil{
        width:                        450px;
        border:                        1px #666 solid;
        border-radius:        12px;
        margin:                        auto;
        background:                #f0f0f0;
        margin-top:                5%;
        padding:                10px;
    box-shadow:                         1px 1px 4px rgba(0, 0, 0, 0.1),
                                               -1px 1px 4px rgba(0, 0, 0, 0.1),
                                        1px -1px 4px rgba(0, 0, 0, 0.1),
                                               -1px -1px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:                 1px 1px 4px rgba(0, 0, 0, 0.1),
                                               -1px 1px 4px rgba(0, 0, 0, 0.1),
                                        1px -1px 4px rgba(0, 0, 0, 0.1),
                                               -1px -1px 4px rgba(0, 0, 0, 0.1);
          -webkit-box-shadow:         1px 1px 4px rgba(0, 0, 0, 0.1),
                                               -1px 1px 4px rgba(0, 0, 0, 0.1),
                                        1px -1px 4px rgba(0, 0, 0, 0.1),
                                               -1px -1px 4px rgba(0, 0, 0, 0.1);
}

.error{
        color:                        #aa0000;
}

.noterror{
        color:                        #00aa00;
}

</style>

</head>
<body>
<div class="main">
        <div class="header">
                <div class="welcome_user"><strong>Willkommen Test</strong>
<br />
<strong>Konto:</strong>                </div>
        </div>
        <div class="menu">
                <a href="?" class="menu">Home</a>
                <a href="?p=news" class="menu">Neuigkeiten</a>
                <a href="?p=ewahl" class="menu">Effizienz Wahl (Test)</a>
                <a href="?p=pwahl" class="menu">Punkte Wahl (Test)</a>
                <a href="?p=testshow" class="menu">Mein Team</a>
                <a href="?p=showall" class="menu">Alle Teams</a>
                <a href="?p=last" class="menu">Letzter Spieltag</a>
                <a href="?p=top" class="menu">Top11</a>
                <a href="?p=stand" class="menu">Spielstand</a>
                <a href="?p=easy" class="menu">Notfallwahl</a>
                <a href="?p=profil" class="menu">Mein Profil</a>
                <a href="?c=logout" class="menu">Logout</a>

        </div>
        <div class="body">
                <iframe src="http://www.mirkolinho.de/Check_PK.php" width="100%" height="5500" name="Punkte">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
  aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>
        </div>
</div>
</body>
</html>

Jo der sieht so aus ^^
 
Hast du dir eigentlich selber mal angeschaut was du uns da für einen Code zeigst? Wo bitte ist da die Tabelle in der die Bilder dargestellt werden sollen?

Wenn es die Tabelle nicht gibt, dann erstelle sie!!

Stelle deinen Code z.B. bei ein so wie es jeipack auch schon geschrieben hat, dann siehst du was dabei herauskommt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück