Can I set a given width, height of the mouse area where you scroll over the image?

[javascriptcoding5678]

So, if I set it to 100px x 100px, that size box would be going over the image.

But the jquery would need to be replaced with pure javascript first.

code: https://jsfiddle.net/gdsbcx4h/

$(function(){
    $(document).mousemove(function(e){
        $('#coordinates').html('x: ' + e.pageX + ' y : ' + e.pageY);
    });

[bbsmooth]

Not sure I understand what you are trying to do here? Can you be more specific. Or maybe try to implement it yourself so we can see the code.

[javascriptcoding5678]

When you move the the mouse cursor over the image, it would have a set sized box going over the image.

[bbsmooth]

Sounds like you would want to use the hover event to detect when the mouse is over the image and then you can display the box on top of the image. You can set the dimensions of the box using CSS width/height and place it with absolute positioning. Use z-index to get it to float over the image.

[javascriptcoding5678]

Here is a different code I found.

code: https://jsfiddle.net/efmax35r/1/

When my mouse is over it, I would like there to be a square that is 100 x 100x.

var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;

function FindPosition(oElement) {
  if (typeof(oElement.offsetParent) != "undefined") {
    for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
    return [posX, posY];
  } else {
    return [oElement.x, oElement.y];
  }
}

function GetCoordinates(e) {
  var PosX = 0;
  var PosY = 0;
  var ImgPos;
  ImgPos = FindPosition(myImg);
  if (!e) var e = window.event;
  if (e.pageX || e.pageY) {
    PosX = e.pageX;
    PosY = e.pageY;
  } else if (e.clientX || e.clientY) {
    PosX = e.clientX + document.body.scrollLeft +
      document.documentElement.scrollLeft;
    PosY = e.clientY + document.body.scrollTop +
      document.documentElement.scrollTop;
  }
  PosX = PosX - ImgPos[0];
  PosY = PosY - ImgPos[1];
  document.getElementById("x").innerHTML = PosX;
  document.getElementById("y").innerHTML = PosY;
}

[bbsmooth]

I’m still not exactly clear what you want to do. Do you want the square to appear anytime the mouse is hovered over the image? If so, then you want to listen for the mouseover (hover) event on the image. Is the square going to be centered on the image or is it going to follow the mouse cursor? Having it centered is fairly easy since you can use CSS to do this.

I’m not going to write the code for you. You will need to research and experiment on your own. This link has a good example of how to add an event listener for mouseover.