How do you make an image follow your mouse pointer using jQUERY?

Question

I have looked up and there are a few threads similar to this but I cant make any of them work for me so I have to ask my code at the moment is.It is different

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stylespacewars.css" />
        <script src="jsspacewars.js"></script>
        <script src="jquery.js"></script>
        <img class="Ship" src="Ally ship.gif" alt="HTML5 Icon" >
        <img class="EnemieBasic" src="Basic enemie.gif" alt="HTML5 Icon" >
        <img class="Core" src="Corelevel1.gif" alt="HTML5 Icon" >
        <img class="Shot" src="Shot.gif" alt="HTML5 Icon" >
    </head>
    <body>

    </body>
</html>

Then i have another part of the code in css

html, body {
    width: 100%;
    height: 100%;
    background-color: black; }

IMG.Core {
    display: block;
    margin-left: auto;
    margin-right: auto }

IMG.Ship {
    position:absolute;}

Then the final part is in Javascript

$(document).mousemove(function(e){
    $("Ship").css({left:e.pageX, top:e.pageY});
});

This does not allow the image ship to follow the mouse pointer can anyone help correct this please.

score 1 · Accepted Answer · answered Jul 12 '15 at 17:40

1

Set the position of image to absolute
Get X and Y coordinates of mouse
Apply the X coordinate as left and Y coordinate as top to image

$(document).ready(function(){
  $(document).mousemove(function(e){
    $('img').css('left',e.pageX+"px");
    $('img').css('top',e.pageY+"px");
  });
});

img {
  position: absolute;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://herbadmother.com/wp-content/themes/thesis_18/custom/rotator/sample-1.jpg" alt="" />

answered Jul 12 '15 at 17:40

Siddharth Thevaril

3,722
3
35
71

1

I've used your code and it work but the image is always a certain distance away anyone have any suggestions. – Steve Jul 12 '15 at 21:01
Use the CSS I've provided – Siddharth Thevaril Jul 13 '15 at 02:33

IMTheNachoMan · Answer 2 · 2015-07-12T17:45:41.680

1

Your HTML and JS is a bit off. img tags go in the body. And for the jQuery you need to use . when referencing by class name.

http://jsfiddle.net/imthenachoman/1h3vsa3w/1/

The HTML:

<body>
    <img class="Ship" src="Ally ship.gif" alt="HTML5 Icon" />
    <img class="EnemieBasic" src="Basic enemie.gif" alt="HTML5 Icon" />
    <img class="Core" src="Corelevel1.gif" alt="HTML5 Icon" />
    <img class="Shot" src="Shot.gif" alt="HTML5 Icon" />
</body>

The JavaScript:

$(document).mousemove(function (e)
{
    $(".Ship").css({ left: e.pageX, top: e.pageY });
});

edited Jul 12 '15 at 17:45

answered Jul 12 '15 at 17:41

IMTheNachoMan

5,343
5
40
89

Please include relevant code in answer itself. Otherwise, good answer! BTW, seems better to hide img when mouse leaves the document: http://jsfiddle.net/1h3vsa3w/2/ – A. Wolff Jul 12 '15 at 17:43
@A.Wolff: Done. Thanks! – IMTheNachoMan Jul 12 '15 at 17:45

score 1 · Answer 3 · answered Jul 12 '15 at 17:42

What you are building is simple, so please learn to do it with plain JavaScript first. If anything is not working you can find out exactly why.

There are three aspects of making an image follow the mouse cursor. 1. is the onmousemove event firing properly? 2. are you getting the right coordinates? 3. is the position update effective?

Let's look at each point.

To track the mouse movement, the following is sufficient:

document.onmousemove=function(e){

}
Depends on the browser, the "e" parameter may not be passed in.

document.onmousemove=function(e){ var x, y; if (e) {x=e.clientX; y=e.clientY;} else {x=event.clientX;y=event.clientY;}

}
Position the ship. Give the image an ID:

Try the following lines to see that you can indeed move it around:

var ship=document.getElementById('ship');
ship.style.top='200px';
ship.style.left='100px';

If the above code works, you can combine this with the previous snippet:

document.onmousemove=function(e){
  var x, y;
  if (e) {x=e.clientX; y=e.clientY;} 
  else {x=event.clientX;y=event.clientY;}

var ship=document.getElementById('ship');
ship.style.top=y+'px';
ship.style.left=x+'px';

}

score 0 · Answer 4 · answered Jul 12 '15 at 17:42

0

You are using the wrong selector with jQuery(ship must be a class or id of your image)

$(document).mousemove(function(e){
    $("#ship").css({left:e.pageX, top:e.pageY});
});

Here's a working plunkr

answered Jul 12 '15 at 17:42

nalinc

7,375
24
33

score 0 · Answer 5 · answered Jul 12 '15 at 17:43

0

Like this?

http://jsfiddle.net/JPvya/1275/

You weren't targeting the class by using the .selector method. Furthermore, you had the img in the head of your document. It needed to be part of the body.

answered Jul 12 '15 at 17:43

Nicholas Hazel

3,758
1
22
34

score 0 · Answer 6 · answered Jul 12 '15 at 17:48

0

A period "." is required in your Javascript (since you are referencing a class)

$(document).mousemove(function(e){
    $(".Ship").css({left:e.pageX, top:e.pageY});
});

https://jsfiddle.net/tf9qebnv/1/

answered Jul 12 '15 at 17:48

Dom Slee

611
1
5
10

How do you make an image follow your mouse pointer using jQUERY?

6 Answers6