Checkboxauswahl soll auf einen Bild angezeigt werden - einfach machbar?

Code:
<!DOCTYPE html>
<html>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
  <title>Teamauswahl</title>
  <link href="../assets/application-97bb7b9bb3814fcbc725a992423fd8c6.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="../../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="../../ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
  <script src="../../cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js" type="text/javascript"></script>
  <script src="../../cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="../assets/application-f5b84eb4640f417645826407d22defad.js" type="text/javascript"></script>
  <script type="text/javascript">
window.pageId = 'designer';
playerList = [{"created_at":"2012-04-09T21:53:14Z","id":1,"name":"Marco Amelia","number":1,"position":"GK","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":2,"name":"Mark van Bommel","number":4,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":3,"name":"Philippe Mexes","number":5,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":4,"name":"Alexandre Pato","number":7,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":5,"name":"Gennaro Gattuso","number":8,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":6,"name":"Filippo Inzaghi","number":9,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":7,"name":"Clarence Seedorf","number":10,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":8,"name":"Zlatan Ibrahimovic","number":11,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":9,"name":"Alessandro Nesta","number":13,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":10,"name":"Sulley Muntari","number":14,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":11,"name":"Djamel Mesbah","number":15,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":12,"name":"Mathieu Flamini","number":16,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":13,"name":"Alberto Aquilani","number":18,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":14,"name":"Gianluca Zambrotta","number":19,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":15,"name":"Ig****o Abate","number":20,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":16,"name":"Maxi Lopez","number":21,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":17,"name":"Antonio Nocerino","number":22,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":18,"name":"Massimo Ambrosini","number":23,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":19,"name":"Rodney Strasser","number":24,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":20,"name":"Daniele Bonera","number":25,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":21,"name":"Kevin-Prince Boateng","number":27,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":22,"name":"Urby Emanuelson","number":28,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":23,"name":"Flavio Roma","number":30,"position":"GK","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":24,"name":"Christian Abbiati","number":32,"position":"GK","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":25,"name":"Thiago Silva","number":33,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":26,"name":"Alexander Merkel","number":37,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":27,"name":"Mattia De Sciglio","number":52,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":28,"name":"Mattia Valoti","number":57,"position":"MF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":29,"name":"Robinho","number":70,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":30,"name":"Mario Yepes","number":76,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":31,"name":"Luca Antonini","number":77,"position":"DF","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":32,"name":"Stephan El Shaarawy","number":92,"position":"FW","updated_at":"2012-04-09T21:53:14Z"},{"created_at":"2012-04-09T21:53:14Z","id":33,"name":"Antonio Cassano","number":99,"position":"FW","updated_at":"2012-04-09T21:53:14Z"}];
formationList = [{"configuration":{"players":[null,7,null,null,null,null,null,null,null,13,null],"positions":[1,8,3,5,10,7,13,11,24,15,19]},"created_at":"2012-04-10T02:51:00Z","id":4,"is_active":false,"is_default":false,"name":"2-3-2-1-1","updated_at":"2013-09-05T05:04:58Z"},{"configuration":{"players":[18,null,8,16,null,5,null,null,null,null,3],"positions":[1,2,8,5,6,17,11,20,21,7,30]},"created_at":"2012-04-09T21:53:14Z","id":1,"is_active":false,"is_default":true,"name":"4-4-2","updated_at":"2013-09-05T05:04:58Z"},{"configuration":{"players":[22,null,null,null,16,7,null,null,null,null,null],"positions":[1,2,4,6,17,18,20,21,27,29,31]},"created_at":"2012-04-09T21:53:14Z","id":3,"is_active":false,"is_default":true,"name":"3-4-3","updated_at":"2013-09-05T05:04:58Z"},{"configuration":{"players":[null,null,null,null,null,null,null,null,null,null,null],"positions":[1,7,8,10,11,29,17,21,4,19,25]},"created_at":"2012-04-09T21:53:14Z","id":2,"is_active":true,"is_default":true,"name":"4-3-3","updated_at":"2013-09-05T05:04:58Z"}];
positionList = [{"created_at":"2012-04-09T21:53:14Z","id":1,"label":"GK","updated_at":"2012-04-09T21:53:14Z","x":183,"y":498},{"created_at":"2012-04-09T21:53:14Z","id":2,"label":"DL","updated_at":"2012-04-09T21:53:14Z","x":28,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":3,"label":"DCL","updated_at":"2012-04-09T21:53:14Z","x":134,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":4,"label":"DC","updated_at":"2012-04-09T21:53:14Z","x":184,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":5,"label":"DCR","updated_at":"2012-04-09T21:53:14Z","x":232,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":6,"label":"DR","updated_at":"2012-04-09T21:53:14Z","x":339,"y":415},{"created_at":"2012-04-09T21:53:14Z","id":7,"label":"DML","updated_at":"2012-04-09T21:53:14Z","x":28,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":8,"label":"DMCL","updated_at":"2012-04-09T21:53:14Z","x":134,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":9,"label":"DMC","updated_at":"2012-04-09T21:53:14Z","x":184,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":10,"label":"DMCR","updated_at":"2012-04-09T21:53:14Z","x":232,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":11,"label":"DMR","updated_at":"2012-04-09T21:53:14Z","x":339,"y":332},{"created_at":"2012-04-09T21:53:14Z","id":12,"label":"BML","updated_at":"2012-04-09T21:53:14Z","x":28,"y":250},{"created_at":"2012-04-09T21:53:14Z","id":13,"label":"BCL","updated_at":"2012-04-09T21:53:14Z","x":134,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":14,"label":"MC","updated_at":"2012-04-09T21:53:15Z","x":184,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":15,"label":"BCR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":16,"label":"BMR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":250},{"created_at":"2012-04-09T21:53:15Z","id":17,"label":"ML","updated_at":"2012-04-09T21:53:15Z","x":28,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":18,"label":"MCL","updated_at":"2012-04-09T21:53:15Z","x":134,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":19,"label":"MC","updated_at":"2012-04-09T21:53:15Z","x":184,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":20,"label":"MCR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":21,"label":"MR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":168},{"created_at":"2012-04-09T21:53:15Z","id":22,"label":"AML","updated_at":"2012-04-09T21:53:15Z","x":28,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":23,"label":"AMCL","updated_at":"2012-04-09T21:53:15Z","x":134,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":24,"label":"AMC","updated_at":"2012-04-09T21:53:15Z","x":184,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":25,"label":"AMCR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":26,"label":"AMR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":86},{"created_at":"2012-04-09T21:53:15Z","id":27,"label":"FL","updated_at":"2012-04-09T21:53:15Z","x":28,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":28,"label":"AFL","updated_at":"2012-04-09T21:53:15Z","x":134,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":29,"label":"AF","updated_at":"2012-04-09T21:53:15Z","x":184,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":30,"label":"AFR","updated_at":"2012-04-09T21:53:15Z","x":232,"y":5},{"created_at":"2012-04-09T21:53:15Z","id":31,"label":"FR","updated_at":"2012-04-09T21:53:15Z","x":339,"y":5}];
</script>
<script type="text/template" id="player-template">
  <span class="player-no" data-id="{{ id }}">{{ number }}</span>
  <span class="player-name">{{ name }}</span>
  <span class="player-pos">{{ position }}</span>
</script>
<script type="text/template" id="position-template">
</script>
<script type="text/template" id="player-position-template">
  <span class="shirt-number">{{ number }}</span>
  <span class="shirt-name">{{ name }}</span>
</script>
<script type="text/template" id="formation-template">
  <a href="#">{{ name }}</a>
</script>

  <meta content="authenticity_token" name="csrf-param" />
<meta content="GM1TR0HoWNGeotpaDYVjLzQKQmELLE9AILk44CJWfrI=" name="csrf-token" />
</head>
<body>


<div id="container">
  <h3>Formation Designer</h3>
  <div id="formation-manager">
    <ul id="formation-menu">
      <li id="formation-append">
        <a href="#">Formation</a>
        <ul id="formation-list">
          <li class="formation-menu-item">
            <a href="#" id="save-formation">Team Speichern</a>
          </li>
          <li class="formation-menu-item">
            <a href="#" id="save-formation-as">Team Speichern als ...</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="builder.html">Aufstellung</a>
      </li>
    </ul>
  </div>
  <div class="clear">
  </div>
  <div id="pitch">
  </div>
</div>


</body>
</html>

Ich habe jetzt schon einmal diese Lösung gefunden. Allerdings ist hier die Aufstellung fest eingetragen und kommt nicht aus der Datenbank. Schöner wäre natürlich wenn diese nun per SQL Befehl aus der DB geholt werden würde und dann auch dort gespeichert wird.
 
1) Auch mit diesem Code kann man nichts anfangen!

2) Hast du in deinen ganzen Beiträgen bereits so viel Hilfe bekommen, das du wissen solltest wie du die Abfrage der Datenbank hier einbinden musst!

3) Im obigen Beitrag schreibst du nichts von einem direkten Problem, du willst einfach eine fertige Lösung. Dann stelle diesen Beitrag in die Jobbörse!
 
Zurück