Программирование > JavaScript & JScript

Рамка на картинке

(1/1)

DimoninG:
Пишу на JavaScript. По фотографии должна передвигаться рамочка (с помощью мыши). Это я сделал. Пользователь передвигает рамочку на ту часть фото, какую хочет вырезать и... А в том проблема, что по пустой странице рамка передвигается правильно. А как только указатель попадает на фотографию, рамка сразу же перестает за ним следовать.

Вот код.

Комментарии: Вместо фото some.gif поставьте любое и посмотрите.



Изменение фото


   div {position: absolute;
   BORDER-RIGHT: #0048b5 1px solid;
   BORDER-TOP: #0048b5 1px solid;
   BORDER-LEFT: #0048b5 1px solid;
   BORDER-BOTTOM: #0048b5 1px solid}




   var i=0;

   function onbodyclick(){
      i++;
      if (i > 1) i = 0;
   }
   
   function bodyMouseMove(){

   var obj;
   
      if (i == 1){
         obj = window.event.srcElement;
         obj.style.pixelLeft = window.event.x - obj.style.pixelWidth/2;
         obj.style.pixelTop = window.event.y - obj.style.pixelHeight/2;
      }

   }






   
   




Работает так: видим рамку (синяя, размером 150x110). Жмем на ней левой кнопкой мыши и рамка начинает следовать за курсором. Если нажать еще раз - рамка перестанет следовать (что-то типа  метода Drag-n-Drop). Но когда рамка "доезжает" до фотографии (на которой она и должна делать свою работу) и курсор попадает на фото, то рамка сразу стопорится. В чем дело?

P.S. Я догадываюсь, что прикол в том, чтобы фотку вывести по-другому. Например, как фон на странице. Но тогда еще проблема. Фоток становится много (фон, все таки).

Очень надеюсь, что кто-нибудь мне поможет. Спасибо.

DimoninG:
Разобрался сам, как всегда и бывает :-).
Код привожу для любопытных.
Всем спасибо :-).



Изменение фото


div {position: absolute;
BORDER-RIGHT: #0048b5 1px solid;
BORDER-TOP: #0048b5 1px solid;
BORDER-LEFT: #0048b5 1px solid;
BORDER-BOTTOM: #0048b5 1px solid}




var i=0;

function onbodyclick(){

var obj;
      obj = window.div1;

      if (window.event.clientX >= obj.style.pixelLeft &&
          window.event.clientX = obj.style.pixelTop &&
          window.event.clientY 1) i = 0;
      }
}

function bodyMouseMove(){

var obj;

   if (i == 1){

      obj = window.div1;

      if (window.event.clientX >= obj.style.pixelLeft &&
          window.event.clientX = obj.style.pixelTop &&
          window.event.clientY

Навигация

[0] Главная страница сообщений