Форум

alexonus1 · #1 (**permalink**) 27.05.2012, 14:01

Я хочу сделать окно в которое будет загружатся план картинка помещения. Далее мышкой я перемещаю гиперссылки в нужные мне места мышкой. Возле гиперссылок могут быть графические значки статуса. Как лучше ето сделать.

alexonus1 · #2 (**permalink**) 27.05.2012, 23:22

Ну вот есть у меня пример один. как заменить вместо квадрата
<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>

Aetae · #3 (**permalink**) 27.05.2012, 23:58

<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)">
<a href="http://javascript.ru">javascript.ru</a>
</div>
 
</body>
</html>

Очевидно же.

alexonus1 · #4 (**permalink**) 29.05.2012, 08:15

Спасибо !
Хочу вставить в квадрат чекбокс <input type="checkbox" name="option1" value="http://192.168.1.1/?l2=1" checked> Но без кнопки отправки. Можно ли сделать типа авторефреш чекбокса? Галочка стоит отсылаем переменную, а если нет галочки то другую переменную. Если ставить кнопку то идет сброс координат расставленых квадратиков.

Alexonus · #5 (**permalink**) 30.05.2012, 11:29

У меня есть вот такой пример:

$url = "http://192.168.1.1/?l2=1";  
$ch = curl_init();  
curl_setopt($ch, CURLOPT_URL,$url); // set url to post to  
curl_setopt($ch, CURLOPT_FAILONERROR, 1);  
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);// allow redirects  
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); // return into a variable  
curl_setopt($ch, CURLOPT_TIMEOUT, 3); // times out after 4s  
curl_setopt($ch, CURLOPT_POST, 1); // set POST method  

$result = curl_exec($ch); // run the whole process  
curl_close($ch);

как бы его связать с чекбоксом ?

GuardCat · #6 (**permalink**) 30.05.2012, 12:25

Сообщение от Aetae

Очевидно же.

http://i002.radikal.ru/1105/7c/d8802c646250.jpg

Код и вправду несложный, но не сдержался, простите =)

Alexonus · #7 (**permalink**) 30.05.2012, 12:30

Форум

Справочник

Discord чат

Курсы javascript