Image Map

Meine Frage ist also wie kann ich den User ein Rechteck über den Bereich ziehen lassen, die Koordinaten ermitteln und diese dann abspeichern damit beim nächsten Anmeldevorgang noch alles vorhanden ist?

Der hier verwendete Code

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> img{ width:60%; margin-left:20%; } #feld{ position:absolute; top:0; left:0; width:50px; height:50px; z-index:1; border:2px solid red; background:rgba(255,0,0,0.5); } </style> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body margin="0" padding="0"> <div id="feld"></div> <img onclick="getco(event);" id="bild" name="bild" src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png"> <script> $( function() { $( "#feld" ).draggable({ cursor: "crosshair", cursorAt: { top:0, left:0 } }).on('mouseup',function(){ getco(event); function checkBrowserName(name){ var agent = navigator.userAgent.toLowerCase(); if (agent.indexOf(name.toLowerCase())>-1) { return true; } return false; } function getco(e) { imagepositionx = document.getElementById("bild").offsetLeft; imagepositiony = document.getElementById("bild").offsetTop; var parentelement = document.getElementById("bild").offsetParent; while (parentelement) { imagepositionx += parentelement.offsetLeft; imagepositiony += parentelement.offsetTop; parentelement = parentelement.offsetParent; } var cordx = (e.clientX - imagepositionx); var cordy = (e.clientY - imagepositiony); if(checkBrowserName('MSIE')){ cordx = cordx-2; cordy = cordy-2; } plushe=cordy+50; pluswe=cordx+50; bildcords='coords="'+cordx+','+cordy+','+plushe+','+pluswe+'"'; alert(cordx + 'px von Links \n ' + cordy+' px von Top\nBildkordinaten '+bildcords); } }) } ); /* $('body').on('mouseup',function(e){ var ga=document.createElement('div'); ga.id='feld'; ga.style.border='2px solid red'; ga.style.position='absolute'; ga.style.background='rgba(255,0,0,0.3)'; ga.style.height='50px'; ga.style.width='50px'; var s=document.getElementsByTagName('body')[0]; s.parentNode.insertBefore(ga,s); $('body').on('mousemove',function(e){ var cordx = (e.clientX); var cordy = (e.clientY); $('#feld').css({'left':cordx+'px','top':cordy+'px'}); }); }); */ </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!