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="/css_webseite/jquery-ui.css">
<script src="/js_webseite/jquery.min.js"></script>
<script src="/js_webseite/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>
</head>
<body margin="0" padding="0">
<div id="feld"></div>
<img onclick="getco(event);" id="bild" name="bild" src="/image/apple.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>