I have a personal website and I want to spice it up a bit while also learning some front-end. An idea I had was that the cursor of my website would be a coffee instead of the default one, and anytime I click on any content, the coffee pours. Any idea if this is possible and if so, what I need to do to implement it?

CodePudding user response：

You can change the cursor using CSS - see https://www.w3schools.com/cssref/pr_class_cursor.asp and do something like

div {
    cursor:url(myCoffeeJug.cur),auto;
}

You could then use Javascript to change the cursor shape (ie URL) when the user clicks in the div. You'd need to think how to change it back again after whatever operation the click triggers is complete.

Note that you can't do animations this way - but given that clicking on a div is likely to be quite a quick action, just switching to and back from a different icon might well be enough for what you want.

However this is perhaps not a great idea from the usability point of view. Web users are used to the basic types of cursor provided by browsers - overriding them may be cute, but it can also be confusing.

If your site is designed for 'ordinary' users looking for information or functionality (rather than for web designers, or as a showcase for your techniques), you're putting a small barrier in their way. Users who are not confident, or are new to all this, or non-neurotypical users may find it off-putting.