Спасибо за ответ...
Вобщем включился в основы JS и CSS - сделал так
<html lang="en">
<head>
<style type="text/css">
#el{
position:relative;
width: 100%;
background:#555}
.stamp{
width:200px;
height:50px;
background:#555;
position: absolute;
opacity:0.6;
/*z-index: 2*/
}
</style>
</head>
<body>
<img id="el" src='1.png'>
<script type="text/javascript">
var el = document.getElementById('el');
el.addEventListener('mouseup', getClickXY, false);
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('X').value = clickX;
document.getElementById('Y').value = clickY;
document.getElementById('st').style.top = clickY+'px';
document.getElementById('st').style.left = clickX+'px';
//alert('Координаты отпускания: X= '+ clickX +' Y= '+ clickY);
}
</script>
<form method="POST" action="">
<input type='hidden' id="X">
<input type='hidden' id="Y">
<div class="stamp" id="st"><center>AA1BB<br />Name Sirname</center></div>
</form>
</body>
</html>
Если есть ошибки критические - поправляйте. Но вроде мои задачи выполняет
Нет ошибся я. Позиционирование блока div абсолютное, отсюда ошибка возникает, если сверху над картинкой что-то выводится дополнительно. Как привязать координаты позиционирования к картинке?