JQuery перемещение изображения вместо кнопки

Question

Так что я пытаюсь создать код сценария, если ваша мышь приближается к изображению, изображение будет перемещаться. Вот мой источник и живой просмотр. http://jsfiddle.net/9CDtE/4/ Вы можете видеть, как только вы двигаетесь рядом с кнопкой, которую он двигает, и это то, что я хочу. Но теперь мне нужно превратить кнопку в html-форму и превратить кнопку в изображение. Есть ли способ сделать это? Я не могу с jquery.

HTML

<button>button</button> 

JS

$(function(){ 
    $("button").on({ 
     mouseover:function(){ 
      $(this).css({ 
       left:(Math.random()*200)+"px", 
       top:(Math.random()*200)+"px", 
      }); 
     } 
    }); 
}); 

CSS

button{ 
    position:absolute; 
    top:10px; 
    left:10px; 
} 

У меня есть покемон онлайн-игры. Я хочу захватить случайный pokemon из db (который я могу сделать), а затем изменить покемон каждый раз, когда пользователь перемещает мышь рядом с ним и перемещается по странице. Итак, будет html-форма с let say 3 поля, имя покемона - идентификатор pokemon и изображение pokemon. При загрузке одной страницы он автоматически захватывает случайный покемон из db и заполняет эти скрытые поля в форме html. Что я могу сделать. Как только пользователь перемещает свою мышь рядом с покемоном/изображением, он будет перемещаться, а затем будет захвачен другой случайный покемон, и форма html изменится на новую информацию о покемоне. Он будет меняться до тех пор, пока пользователь не сможет нажать на изображение, которое затем отправит форму.

Answer 1

По логике вашего кода выше вместо кнопки в вашем css и селекторе.

Вставьте img с определенным ID.

<img src="" id="cantTouchThis" /> 

И использовать cantTouchThis в вашем коде, ваш селектор хотел бы это:

$("#cantTouchThis").on({ 

Но вы используете кнопку, и вы сказали хотели изображение, это заблуждение, однако. Вы можете в любой момент просто вставить HTML после кнопки, как:

$("#cantTouchThis").after('<form>.....</form>');

Пожалуйста, разработать и четко объяснить, для лучшего ответа.

Клонить к обновлению, что-то вроде этого является то, что вы хотите:

$(function(){ 
    $("#cantTouchThis").on({ 
     mouseover:function(){ 
      $(this).css({ 
       left:(Math.random()*200)+"px", 
       top:(Math.random()*200)+"px", 
      }); 
      //Go get PHP via jQuery AJAX 
      // Grab data and now update your form, or insert form! 
      // Insert new form $('#following_around').html('<form>...</form>'); 
      // Example change directly the "Pokemon" ID in the form, without the need to completely insert a new form 
      $('#following_around #random_id').html(Math.random()*10); 
     } 
    }); 
});