VPF::Передача координат выделения в Input hidden

Wheels

Дата 15.12.2007, 18:52 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: нет
Всего: 1

Здравствуйте.

Имеется необходимость выделить область на картинке средствами js и передать координаты этой области скрипту php (для удобного создания превьюшки). Перерыл форум, нашел подходящий для себя вариант:

http://911.ru/to_rsdn/mouse_rect.html

Но в js я - 0 =( поэтому, прошу помощи: как прикрутить к этому скрипту, допустим, поля <input hidden>, в которые бы записывались координаты выделенной области? Сам пробовал "методом тыка", но у меня только ломается все =).
smile

Заранее огромное спасибо.
вот код:

Код


<html>
<script>

  var mouse_data = new Object();
      mouse_data['downed']=false;

  function do_mdown(_obj) {
     event.returnValue=false;
     if (!_obj) return false;
     if (event.button!=1) return false;
     var rect = document.all.mrect;
     var coords=GetAbsCoords(_obj);
     mouse_data['downed'] = true;
     mouse_data['start_x'] = event.clientX+document.body.scrollLeft;
     mouse_data['start_y'] = event.clientY+document.body.scrollTop;
     mouse_data['end_x'] = mouse_data['start_x'];
     mouse_data['end_y'] = mouse_data['start_y'];
     mouse_data['coords'] = coords;

     adjust_rect_pos();
     rect.style.display='block';

     mouse_data['obj']=_obj;
     return false;
  }

  function do_mup(_obj) {
     if (event.button!=1) return false;
     event.returnValue=false;
     if (!_obj) return false;
     var rect = document.all.mrect;
//     var coords=GetAbsCoords(_obj);
     var coords=mouse_data['coords'];
     mouse_data['downed'] = false;

     if (mouse_data['start_x']==mouse_data['end_x'] && mouse_data['start_y']==mouse_data['end_y']) rect.style.display='none';
     return false;
  }

  function do_mmove(_obj) {
     event.returnValue=false;
     if (!mouse_data['downed']) return false;
     if (!_obj) return false;
     if (event.button!=1) return false;
     var rect = document.all.mrect;
//     var coords=GetAbsCoords(_obj);
     var coords=mouse_data['coords'];


     mouse_data['end_x'] = event.clientX+document.body.scrollLeft;
     mouse_data['end_y'] = event.clientY+document.body.scrollTop;

     if (mouse_data['end_x']<coords[0]) mouse_data['end_x']=coords[0];
     if (mouse_data['end_y']<coords[1]) mouse_data['end_y']=coords[1];
     if (mouse_data['end_x']>coords[0]+coords[2]) mouse_data['end_x']=coords[0]+coords[2];
     if (mouse_data['end_y']>coords[1]+coords[3]) mouse_data['end_y']=coords[1]+coords[3];

     adjust_rect_pos();
     return false;
  }

  function adjust_rect_pos() {
     var rect = document.all.mrect;

     var rc=[];
         rc[0]=Math.min(mouse_data['start_x'], mouse_data['end_x']);
         rc[1]=Math.min(mouse_data['start_y'], mouse_data['end_y']);
         rc[2]=Math.max(mouse_data['start_x'], mouse_data['end_x'])-Math.min(mouse_data['start_x'], mouse_data['end_x']);
         rc[3]=Math.max(mouse_data['start_y'], mouse_data['end_y'])-Math.min(mouse_data['start_y'], mouse_data['end_y']);

     rect.style.pixelLeft=rc[0];
     rect.style.pixelTop=rc[1];
     rect.style.pixelWidth=rc[2];
     rect.style.pixelHeight=rc[3];
  }

  function GetAbsCoords(_obj) {
     var _top=0;
     var _left=0;
     var _parent=_obj;
         _top+=_parent.offsetTop;
         _top+=_parent.clientTop;
         _left+=_parent.offsetLeft;
         _left+=_parent.clientLeft;
     do {
         _parent=_parent.offsetParent;
         _top+=_parent.offsetTop;
         _top+=_parent.clientTop;
         _left+=_parent.offsetLeft;
         _left+=_parent.clientLeft;
     } while (_parent!==document.body);
     return [_left, _top, _obj.clientWidth, _obj.clientHeight];
//     return [_left-document.body.scrollLeft, _top-document.body.scrollTop, _obj.clientWidth, _obj.clientHeight];
  }


</script>
<body>
<span id=mrect
  onmousedown="return do_mdown(mouse_data['obj']);"
  onmousemove="return do_mmove(mouse_data['obj']);"
  onmouseup="return do_mup(mouse_data['obj']);"
  style="display:none;position:absolute;border:1px solid #FF0000;font-size:0px;padding:0px;"><span
      style="width:100%;height:100%;font-size:0px;margin:0px;padding:0px;background-color:#336699;FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=30);"
          ></span></span>
&nbsp;<img border=1 onmousedown="return do_mdown(this);" onmouseup="return do_mup(this);" onmousemove="return do_mmove(this);" src="images/map.jpg">
</body>
</html>

Wheels

Дата 16.12.2007, 03:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: нет
Всего: 1

Требуются координаты левого верхнего угла выделения (считая от самого изображения, но не от документа) И правого нижнего или как вариант правому нижнему - длинна и высота выделенной области.

Вот. Как-то так...

ksnk

Дата 16.12.2007, 10:42 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Ну, а какие проблемы?
Поменяй на строчках 31..33

Код


     var rect = document.all.mrect;
alert(GetAbsCoords(_obj)); // - это абсолютные координаты картинки
alert(GetAbsCoords(rect ));// - это абсолютные координаты выделения
     var coords=mouse_data['coords'];

Сразу будет видно откуда ноги растут ;)
Затем, нужно , поменять alert'ы на чего-то такое

Код


var x=GetAbsCoords(_obj),y=GetAbsCoords(rect);
y[0]-=x[0];y[1]-=x[1];
document.getElementById('MyInput').value=y.toString();

, ну и добавить этот самый input куда-то

Код


<input id="MyInput"/>

Другое дело, что скрипт написан совсем уж под IE и ни под чем другим работать не будет.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Wheels

Дата 16.12.2007, 15:59 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: нет
Всего: 1

ksnk, спасибо большое. =)

Это сообщение отредактировал(а) Wheels - 16.12.2007, 16:02

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »