2

I want to implement the following in HTML/JavaScript but don't really know where to start or even if there is already an existing function in one toolkit for this:

I have one image (e.g. a png) which is visible and a second image of the same size which is not visible. However, if I move the mouse pointer over the first image, the corresponding part from the second image shall be shown around the mouse cursor. So for example, if I move the mouse at position 100,100 on the first image, the section from 50,50 to 150,150 of the second image should be overlaid on the first image at position 50,50 to 150,150. I hope this is understandable.

Does anyone know, if there is already a library which contains this functionality? I've already searched for this on the internet but found nothing. However, I do not really know what keywords to search for. So if someone knows a keyword to search for, I would be appreciate hints as well.

Alternatively, Can you give me a cue how could I grep the part of the second image and display it at the mouse position? I was thinking that canvas might be used but I am not sure how to.

Thank you very much and best regards

Tobias

2
  • The canvas element should support this natively; check the Compositing section here: i.pinimg.com/originals/aa/b4/ef/… (and if not you can directly manipulate all four channels of each individual pixel so in theory you can write it yourself using the imageData array)
    – user5734311
    May 14, 2020 at 16:29
  • So it's like a cutout of some sorts where you see part of the other image on hover? The cheatsheet of canvas is a great suggestion. Otherwise use a CSS clip-path value on your second image and animate it with the moving of the mouse. May 14, 2020 at 16:33

1 Answer 1

5

This can be done with Vanilla JS or JQuery. Basic idea behind it is to wrap the image in a container with position:relative and listen to mouse movement on it. A second <div> with position:absolute will receive the coordinates of the mouse pointer with its background position set to match the current mouse offset.

The posted code is just to give an idea how this would look like and needs to be extended to properly handle the edges of the image.

$(".hover-container").on("mousemove", function (e) {
  var parentOffset = $(this).parent().offset();
  //or $(this).offset(); if you really just want the current element's offset
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  var picHeight = $('.hover-image').height();
  var picWidth = $('.hover-image').height();
  $('.hover-image')
    .css("left", relX - 50 + "px")
    .css("top", relY - 50 + "px")
    .css("background-position", (picWidth-relX-50) + "px " 
         + (picHeight-relY-50) + "px")
});
.hover-container {
  position: relative;
}

.hover-image {
  position: absolute;
  width: 100px;
  height: 100px;
  background: url(https://i.imgur.com/Hp5pUVA.jpg);
  background-position: 0 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="hover-container">
  <img class="hover-over" src="https://i.imgur.com/j0yhQez.jpg"/>
  <div class="hover-image"></div>
</div>

1
  • You are very welcome :-). There's plenty of room for improvement so have fun tweaking the code."Schönes Wochenende"
    – SaschaM78
    May 15, 2020 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.