Блок следует за мышкой и получение координат
Всем добрый день. Начну с описания задачи которая передомной стоит.
Есть картинка, на эту картинку необходимо наносить надпись и отдавать пользователю в виде конечного файла в PDF. Надписи каждый раз разные, но однотипные (имя + небольшой код состоящий из 3-6 символов) Картинка может быть произвольной, пользователь должен указать на шаблоне в каком месте будет ставиться надпись. Далее координаты записываються в базу и вопросы нанесения надписи и выталкивания клиенту ложатся на php Как видится решение. Получение координат на картинке решаю следующим образом. Стиль
<style type="text/css">
#el{
position:relative;
width: 100%;
background:#555;
z-index: 2;
}
</style>
HTML: <img id="el" src='1.png'> JS скрпит
<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;
alert('Координаты отпускания: X= '+ clickX +' Y= '+ clickY);
}
</script>
Это я на просторах интернета нарыл. В принципе плюс/минус понимаю скрипт. Таким образом я получаю координаты где пользователь отпустит кнопку(можно поставить клик) Вопрос вот в чем... Как прикрепить к курсору прямоугольник не большой, который будет символизировать надпись? Просто для наглядности пользователю, что б он понимал где будет расположена надпись. По отпусканию, что бы этот прямоугольник закрепился на этом месте. По сути мне нужно что б прямоугольник можно было перетянуть на картинке и получить координаты левого нижнего угла этого прямоугольника относительно картинки(она большая в несколько тыс пискелей по ширине и высоте). В идеале эти координаты заносятся в аттрибуты value hidden-полей(x,y) формы и отправляется из нее в скрипт, который эти координаты запишет в базу. Помогите пожалуйста реализовать это. |
Форму уже сделал - получаю координаты - проблем нет. Теперь мне бы тягать за мышкой прямоугольник (какой нибудь DIV) и по клику его фиксировать на изображении
|
|
Спасибо за ответ...
Вобщем включился в основы 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 абсолютное, отсюда ошибка возникает, если сверху над картинкой что-то выводится дополнительно. Как привязать координаты позиционирования к картинке? |
Продолжая тему)) Вдруг кому нибудь понадобится. Такое решение - полностью выполняет задачу. Конечно можно совершенствовать. Но это уже для профи в 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>
|
| Часовой пояс GMT +3, время: 03:19. |