Показать сообщение отдельно
  #2 (permalink)  
Старый 27.05.2012, 23:22
Новичок на форуме
Отправить личное сообщение для alexonus1 Посмотреть профиль Найти все сообщения от alexonus1
 
Регистрация: 27.05.2012
Сообщений: 3

Ну вот есть у меня пример один. как заменить вместо квадрата
<a href="URL">...</a> ну или привязать к квадрату
<html>
<head>
<IMG SRC=1.jpg>
  <title>drag</title>

  <style>
    #obj01 {
      width: 100px;
      height: 100px;
      border: solid 1px gray;
      background-color: white;
      position: absolute;
    }
  </style>

  <script type="text/javascript" charset="utf-8">

    var dragObject;
    var offsetX, offsetY;
    var isDragging = false;

    window.onload = init;

    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;

    function init() {
      var o = document.getElementById("obj01");
      o.ondrag = function() { return false; };
      o.onselectstart = function() { return false; };
      o.style.left = "100px";
      o.style.top = "100px";
      o.style.display = "block";
    }

    function mouseDown(o, e) {
      dragObject = o;
      if(window.event) e = window.event;
      var oX = parseInt(dragObject.style.left);
      var oY = parseInt(dragObject.style.top);
      var mouseX = e.clientX;
      var mouseY = e.clientY;
      offsetX = mouseX - oX;
      offsetY = mouseY - oY;
      isDragging = true;
      return false;
    }

    function mouseMove(e) {
      if(!isDragging) return;
      if(window.event) e = window.event;
      var mouseX = e.clientX;
      var mouseY = e.clientY;
      var newX = mouseX - offsetX;
      var newY = mouseY - offsetY;
      dragObject.style.left = newX + "px";
      dragObject.style.top = newY + "px";
      return false;
    }

    function mouseUp() {
      if(!isDragging) return;
      isDragging = false;
      return false;
    }

  </script>

</head>
<body>

<div id="obj01" onmousedown="javascript:mouseDown(this, event)"></div>

</body>
</html>
Ответить с цитированием