Динамическое изменение картинки на Javascript

Хыиуду · 22 дек 2009, 12:17

Имеется веб-страничка, на ней картинка. Надо, чтобы onMouseMove на этой картинке рисовались две линии, горизонтальная и вертикальная, проходящие через курсор мыши. То бишь чтобы при движении мышью по картинке эти две линии образовывали что-то вроде "прицела".

chur · 22 дек 2009, 14:40

Как-то так можно

Код: Выделить всё

<html>
<head>
<title>On Mouse Move</title>
</head>
<body>
<script type="text/javascript" language="javascript1.5">
  function lineontarget(e) {
    if (window.event) { e=window.event; }
    var hl = document.getElementById("hline");    
    var vl = document.getElementById("vline");    
    var linesize = 200;
    var x = parseInt(e.clientX - (linesize/2));
    var y = parseInt(e.clientY - (linesize/2));
    hl.style.top = e.clientY + "px";
    hl.style.left = x + "px";
    vl.style.top = y + "px";
    vl.style.left = e.clientX + "px";
  }
</script>
<img id="targetpic" src="target.jpg" />
<div id="hline" style="width: 200px; height: 2px; background-image: url(dot.jpg); background-position: center center; background-repeat: repeat-x; position: absolute; top: 0px; left: 0px;"></div> 
<div id="vline" style="width: 2px; height: 200px; background-image: url(dot.jpg); background-position: center center; background-repeat: repeat-y; position: absolute; top: 0px; left: 0px;"></div> 
<script type="text/javascript" language="javascript1.5">
  document.getElementById("targetpic").onmousemove = lineontarget;    
</script>
</body>

Хыиуду · 23 дек 2009, 09:32

Спасибо, примерно до этого я тоже докопался. Правда, мне требовалось сделать так, чтобы обе линии перемещались строго внутри картинки. Но этого можно добиться, закомментировав изменение абсциссы горизонтальной линии и ординаты вертикальной
Проблема в том, что если картинка расположена не в левом верхнем углу страницы, а где-то посередине, линии все равно продолжают ездить по левому верхнему углу. А document.getElementById('targetpic').style.top и document.getElementById('targetpic').style.left возвращают пустые строки.
--------------------------------------------------------------------------------
Добавлено сообщение
--------------------------------------------------------------------------------
Задача решена
document.getElementById('targetpic').offsetLeft и document.getElementById('targetpic').offsetTop

chur · 23 дек 2009, 12:03

Хыиуду писал(а): Проблема в том, что если картинка расположена не в левом верхнем углу страницы, а где-то посередине, линии все равно продолжают ездить по левому верхнему углу.

Странно, у меня нормально, по картинке, ездит. Хоть в углу, хоть в центре.

Хыиуду писал(а): А document.getElementById('targetpic').style.top и document.getElementById('targetpic').style.left возвращают пустые строки.

Я могу только догадываться, почему в яваскрипте свойства style.top и style.left доступны только на запись. Чтоб определить положение элемента надо юзать offsetTop и offsetLeft

Код: Выделить всё

<script type="text/javascript" language="javascript1.5">
  function absPosition(obj) {
    var x = y = 0;
    while(obj) {
      x += obj.offsetLeft;
      y += obj.offsetTop;
      obj = obj.offsetParent;
    }
    return {x:x, y:y};
  }
  function lineontarget(e) {
    if (window.event) { e=window.event; }
    var pic = document.getElementById("targetpic");
    var picpos = absPosition(pic);
    var hl = document.getElementById("hline");    
    var vl = document.getElementById("vline");    
    var linesize = 200;
    hl.style.top = e.clientY + "px";
    if (e.clientX < picpos.x + linesize/2) {
      hl.style.width = parseInt(e.clientX - picpos.x + linesize/2) + "px"; 
      hl.style.left = picpos.x + "px";
    } else if (e.clientX > picpos.x + pic.offsetWidth - linesize/2) {
      hl.style.width = parseInt(picpos.x + pic.offsetWidth - e.clientX + linesize/2) + "px"; 
      hl.style.left = parseInt(e.clientX - (linesize/2)) + "px";
    } else {      
      hl.style.width = linesize + "px"; 
      hl.style.left = parseInt(e.clientX - (linesize/2)) + "px";
    }
    vl.style.left = e.clientX + "px";
    if (e.clientY < picpos.y + linesize/2) {
      vl.style.height = parseInt(e.clientY - picpos.y + linesize/2) + "px"; 
      vl.style.top = picpos.y + "px";
    } else if (e.clientY > picpos.y + pic.offsetHeight - linesize/2) {
      vl.style.height = parseInt(picpos.y + pic.offsetHeight - e.clientY + linesize/2) + "px"; 
      vl.style.top = parseInt(e.clientY - (linesize/2)) + "px";
    } else {      
      vl.style.height = linesize + "px"; 
      vl.style.top = parseInt(e.clientY - (linesize/2)) + "px";
    }
  }
</script>

Хыиуду · 23 дек 2009, 13:57

chur писал(а):Странно, у меня нормально, по картинке, ездит. Хоть в углу, хоть в центре.

Так я ж говорю - убрал движение вертикальной линии по вертикали, а горизонтальной по горизонтали. Чтобы оно каталось только в пределах картинки.

Ладно, в итоге выяснилось, что заказчику все равно не такое требовалось