Всем добрый день. Начну с описания задачи которая передомной стоит.
Есть картинка, на эту картинку необходимо наносить надпись и отдавать пользователю в виде конечного файла в 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) формы и отправляется из нее в скрипт, который эти координаты запишет в базу.
Помогите пожалуйста реализовать это.