studivz bilder verlinken im eigenbau
-
hi.
ich versuche gerade das verlinkungsverfahren vom studivz nachzubauen. nur ein problem hab ich jetzt.
wenn ich mein mit meinem div ein bereich auf einem bild auswähle hab ich die pixelangaben dazu (left und top), via javascript.
wie kann ich das jetzt in eine db speichern? wie ist mir klar, nur geht das mit js natürlich nicht, denn das läuft ja clientseitig. kann ich sobald die verlinkung gesetzt ist die seite via ajax intern neu laden und somit die werte (left und top pixelangaben) via get/post an die seite übermitteln und dann mit php in die db speichern?hier mal mein bisheriger code
<script type="text/javascript" src="mootools.js"></script> <h3>x auf y verlinken</h3> <div id="topbar"> koordinaten des 4ecks auslesen und in die db speichern -> wie bei studivz -> genutztes js framework ist: mootools </div> <div id="out_box"> <div id="box"></div> </div> <div id="bottombar"> <form action="hash_cookie.php" name"hash_cookie" method="POST"> left: <span id="coordsX"> </span>px, top: <span id="coordsY"> </span>px <input type="submit" name"Speichern" value="speichern" /> </form> </div> <style type="text/css"> #topbar { margin: 5px auto; width: 176x; border-bottom: 1px solid #B3D4EF; } #bottombar { margin: 0pt auto; width: 176px; padding: 2px 5px; background: #D1E2EF; } #out_box { margin: 0px auto; background-image:url(lastscan.jpg); background-repeat:no-repeat; border-top: 1px solid #f9f9f9; border-left: 1px solid #f9f9f9; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; width: 176px; height: 251px; } #box { width: 50px; height: 50px; position: relative; cursor: move; background: #68B2EF; border-top: 1px solid #8FCDFF; border-left: 1px solid #8FCDFF; border-right: 1px solid #408FCF; border-bottom: 1px solid #408FCF; } .border { border-right: 2px solid #0F627F; width: 1px; margin: 0 5px; } select, input { font-size: 10px; } </style> <script type="text/javascript"> var box = $('box'), color = $('color'), coordsX = $('coordsX'), coordsY = $('coordsY'); /* Settings to be stored in Cookies */ var settings = { coords: {"x": 0, "y": 0}, selected: 2 } /* Draggable Box */ /* It's limited to 'out_box' container, when dragged it stores in settings object it's coordinates */ box.makeDraggable({ container: 'out_box', onDrag: function() { var pos = {"x": this.element.getStyle('left').toInt() + 1, "y": this.element.getStyle('top').toInt() + 1}; settings['coords'] = pos; coordsX.setHTML(settings['coords'].x); coordsY.setHTML(settings['coords'].y); } }); </script>
http://s7.directupload.net/images/080222/temp/u4eebal2.jpg
vielen dank!
-
Stichwort: Ajax. oder du machst es so, das beim klicken auf SPeichern eine neue Seite geladen wird, der du die Koordinaten übergibst. Das kann dann ein script sein, das entsprechend die Daten in die Datenbank einträgt.