0

I'm making a basic website for my engineering company and would like to include a full page cross-hair like cursor. Is there any way to include this in my site? Here's an example of this cursor: (I can't include the picture in the post because of lack of reputation.) http://imagebin.ca/v/2GSxt6zx57A5

I would like for this to follow around the page in place of a normal cursor. I can use javascript or CSS if its needed to make this. Thanks!

OwenCraddock
  • 63
  • 1
  • 2
  • 6

1 Answers1

0

My HTML and Javascript skills are a little rusty but something like this should do it:

<html>
<head>
<script>

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.onmousemove = function (e)
{
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();

    context.moveTo(e.clientX,0);
    context.lineTo(e.clientX, canvas.height);
    context.stroke();

    context.moveTo(0, e.clientY);
    context.lineTo(canvas.width, e.clientY);
    context.stroke();
};

</script>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="border:1px solid #d3d3d3; cursor : none">
</canvas>
</body>
</html>
The Pademelon
  • 835
  • 11
  • 29