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?
Add a comment
|
3 Answers
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';
}
8 Comments
Mr. Alien
+1 for your efforts :) and for a disco cursor.. lol, btw default cursor showsup while you are moving the cursor, am on ff 22
Mr. Alien
now that goes pretty well, can't +1 twice ;) but +1 again.. it fixes the default cursor issue too... though support for canvas isn't impressive as of now, but this will be worth to use ahead...
@Mr.Alien canvas support is actually pretty good (I work mostly with canvas nowadays) (caniuse.com/#feat=canvas). But IE is the um..special case, for older versions anyways.
Jaideep Shekhar
Note that the fiddle link is broken.
|
Use an image along with CSS cursor property, I don't see any need of JavaScript heere...
div {
cursor: url(YOUR_IMAGE_URL), auto;
}
As commented, I've used auto which is nothing but default cursor just incase your image fails to load, exactly like we declare multiple font families.
8 Comments
MarsOne
what is the "auto" for ?
Mr. Alien
@NathanLee I never build things for IE as it sucks always for everything, though polyfills are available :)
Nitesh
I agree. But it should work for IE8 atleast. Anyways, nice info :) - @Mr.Alien
Rajesh Paul
@Mr.Alien: Thanks for the alternative approach. At least I have got a solution.
|
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
