Custom Mouse Pointer in JS

This video tutorial is about creating the custom mouse pointer in JS. In this video, you can learn to work with mouse events in JavaScript.

Download | Demo


Source Code:

<!DOCTYPE html>
		<title>Custom mouse pointer</title>
		<style type="text/css">

			width: 800px;
			height: 500px;
			background: #ccc;
			border: 4px solid #333;
			cursor: none;
		<div id="container" class="container">
			<img src="resources/metal_pointer.png" id="customPointer" width="50" style="position:absolute;" />
		<script type="text/javascript">

		var cont = document.getElementById('container');
		cont.onmousemove = applyCustomPointer;

		var customPointer = document.getElementById('customPointer');

		function applyCustomPointer (event) { = event.clientX - (customPointer.offsetWidth / 2) + 'px'; = event.clientY - (customPointer.offsetHeight / 2) + 'px';


Leave a Reply

Your email address will not be published. Required fields are marked *