How can I assign color to the mouse cursor in a web-page?
Can anyone suggest me a way to do it using any of the technologies e.g. HTML, CSS, JavaScript?
How can I assign color to the mouse cursor in a web-page?
Can anyone suggest me a way to do it using any of the technologies e.g. HTML, CSS, JavaScript?
You should create/look for a customized cursor. Then, use the cursor
CSS property to include it on your website.
There's a tutorial for this here: http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm
Just to add the possibility to dynamically adding a cursor without providing an image but generating it on client with JavaScript and Canvas.
Demo contains a simple cursor drawn with shapes, but this could just as easily have been images, video and so forth (everything a canvas support).
Fiddle (updated 5/2016 for Firefox - moved from document to element).
Note: FireFox has problem when the cursor is changed so frequent as in this demo - updated to change only once per second. FF clears the cursor when setting a new image but since the new image needs to be decoded it shows the default in the mean time. Chrome waits until the image is decoded before switching over.
In any case it is merely to show it can be done using canvas - test demo using Chrome and don't change mouse so often :-).
The animation loop which here changes color randomly to demonstrate:
function loop() {
var color = 'rgb(' + ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ')';
makeCursor(color);
setTimeout(loop, 1000);
}
The cursor maker:
function makeCursor(color) {
// create off-screen canvas
var cursor = document.createElement('canvas'),
ctx = cursor.getContext('2d');
cursor.width = 16;
cursor.height = 16;
// draw some shape for sake of demo
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.moveTo(2, 10);
ctx.lineTo(2, 2);
ctx.lineTo(10, 2);
ctx.moveTo(2, 2);
ctx.lineTo(30, 30)
ctx.stroke();
// set image as cursor (modern browsers can take PNGs as cursor).
element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
Use an image along with CSS
cursor
property, I don't see any need of JavaScript heere...Demo
As commented, I've used
auto
which is nothing butdefault cursor
just incase your image fails to load, exactly like we declare multiple font families.