Продолжая тему)) Вдруг кому нибудь понадобится. Такое решение - полностью выполняет задачу. Конечно можно совершенствовать. Но это уже для профи в JS
Может кому-то понадобится такое решение
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
#el{
position:relative;
width: 100%;
/* z-index: 2*/
/*background:#555*/
}
.stamp{
width:200px;
height:40px;
background:#ddd;
position: absolute;
opacity:0.9;
/*z-index: 2*/
}
.stamp2{
width:200px;
height:40px;
background:#ddd;
position: absolute;
opacity:0.6;
/*z-index: 2*/
}
.description{
width:100%;
height: 100px;
border:2px;
}
</style>
</head>
<body>
<div class="description"><form method="POST" action="">
<form action="" method="POST">
<input type='hidden' id="X">
<input type='hidden' id="Y">
<button type="submit"> Указал</button>
</form>
</div>
<img id="el" src='1.png'>
<script type="text/javascript">
var el = document.getElementById('el');
el.addEventListener('click', getClickXY, false);
el.addEventListener('mousemove', moveClickXY, false);
//mouseup
function getClickXY(event)
{
var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
document.getElementById('stmove').style.zindex=-1;
document.getElementById('X').value = clickX+12;
document.getElementById('Y').value = clickY;
divkoordinateY=clickY+108;
document.getElementById('st').style.top = divkoordinateY+'px';
document.getElementById('st').style.left = clickX+12+'px';
alert('Координаты установлены' );
}
function moveClickXY(event)
{
//document.getElementById('st').style.top = divkoordinateY+'px';
var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
divkoordinateY=clickY+108;
document.getElementById('st').style.zindex =-1;
document.getElementById('stmove').style.top = divkoordinateY+'px';
document.getElementById('stmove').style.left = clickX+12+'px';
}
</script>
<div class="stamp" id="st"><center>AA1BB<br />Name Sirname</center></div>
<div class="stamp2" id="stmove"><center>AA1BB<br />Name Sirname</center></div>
</body>
</html>