How to make a cursor to overlay a graph?

Asked

Viewed 74 times

3

I would like to create a type cursor for graphic in Javascript, but not by image from css. For example like this in this chart http://bl.ocks.org/benjchristensen/2657838 but with two lines for x and y. (crossover) I know that existel libraries for this.

javascript

  • Can you explain further what you want? There are graphics that have it already done... or that use still images as graphics and have those lines on top of the image?

  • I intend just the cursor. To be an image had to be big, and with that I could not move the objects with the cursor.

1 answer

4


Maybe this is what you seek: two lines forming a cross, accompanying the mouse position:

var v = document.querySelector('.cursor-v');
var h = document.querySelector('.cursor-h');
var elBox = document.querySelector('.cursor').getBoundingClientRect();

window.onmousemove = function(e) {
    var mouseX = e.clientX - elBox.left;
    var mouseY = e.clientY - elBox.top;
    
    h.style.top = mouseY + 'px';
    v.style.left = mouseX + 'px';
};
html, body {
    height: 100%;
}

.cursor {
    position: relative;
    width: 100%;
    height: 100%;
}

.cursor-h {
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 1px solid red;
}

.cursor-v {
    position: absolute;
    width: 0;
    height: 100%;
    border-left: 1px solid red;
}
<div class="cursor"><div class="cursor-h"></div><div class="cursor-v"></div></div>

  • Yes, thank you. And how can I limit to only appear within for example a div?

  • Put the div .cursor inside the div you want, I think it would be enough.

  • In fact, that’s not enough. Wait for me to edit, @akm.

  • Ready @akm, now yes it works at any page position.

  • I really just wanted to work in a certain area of the page. And when I left that area return to the normal cursor.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.