Changing the look of the cursor - html

Question

I am making an online scratchcard and i need to know how to change my cursor into a coin.
here is an example of the code i already have tried:
<div id="krasvak" class="scratchpad"></div>
<style>
#krasvak {
width: 25%;
height: 100px;
border: solid 1px;
display: inline-block;
}
</style>
<script type="text/javascript" src="wScratchPad.js"></script>
<script type="text/javascript">
$('#krasvak').wScratchPad({
cursor: 'cursor: url("images/muntje.png"), auto;',
scratchMove: function (e, percent) {
console.log(percent);
if (percent > 70)
{
this.clear();
window.alert("U heeft uw code gekrast");
window.location.href='compleet.php';
}
}
});
$('#krasvak').wScratchPad('bg', 'images/slide1.png');
$('#krasvak').wScratchPad('fg', 'images/overlay.png');
$('#krasvak').wScratchPad('size', 10);
</script>
and here is a part of the java script code
$.fn.wScratchPad.defaults = {
size : 5, // The size of the brush/scratch.
bg : '#cacaca', // Background (image path or hex color).
fg : '#6699ff', // Foreground (image path or hex color).
realtime : true, // Calculates percentage in realitime
scratchDown : null, // Set scratchDown callback.
scratchUp : null, // Set scratchUp callback.
scratchMove : null, // Set scratcMove callback.
cursor : 'crosshair' // Set cursor.
};
I would really appriciate it if someone could help me out.

Answer 1

According to the github of the plugin there's a solution:
Update on the Fly
var sp = $("#elem").wScratchPad();
sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');
// Or directly with element.
$("#elem").wScratchPad('image', './images/winner.png');
So try this:
<div id="krasvak" class="scratchpad"></div>
<style>
#krasvak {
width: 25%;
height: 100px;
border: solid 1px;
display: inline-block;
}
</style>
<script type="text/javascript" src="wScratchPad.js"></script>
<script type="text/javascript">
$('#krasvak').wScratchPad({
scratchMove: function (e, percent) {
console.log(percent);
if (percent > 70)
{
this.clear();
window.alert("U heeft uw code gekrast");
window.location.href='compleet.php';
}
}
});
$('#krasvak').wScratchPad('bg', 'images/slide1.png');
$('#krasvak').wScratchPad('fg', 'images/overlay.png');
$('#krasvak').wScratchPad('size', 10);
$('#krasvak').wScratchPad('cursor', 'url("./images/muntje.png") 5 5, default');
</script>

Answer 2

The syntax is
cursor:url(URL TO THE IMAGE)
I don't recommend disk paths (they might not even work). Use a relative path, i.e.
../Scratch the code/images/muntje.png

Answer 3

Try this:
cursor: url("images/muntje.png"), auto;
Make sure the path to the images directory is correct, relative to the path your CSS file is located.

Answer 4

Hi Please use the path like
cursor: url("/Bram/Bram/Scratch the code/images/muntje.png");
if u want to give the full path and access the html file locally
cursor: url("file://C:/xampp/htdocs/Bram/Scratch the code/images/muntje.png");

Answer 5

Put it in the CSS, not in the JavaScript. Maybe that works.
<div id="krasvak" class="scratchpad"></div>
<style>
#krasvak {
cursor: url("images/muntje.png"), auto;
width: 25%;
height: 100px;
border: solid 1px;
display: inline-block;
}
</style>
<script type="text/javascript" src="wScratchPad.js"></script>
<script type="text/javascript">
$('#krasvak').wScratchPad({
scratchMove: function (e, percent) {
console.log(percent);
if (percent > 70)
{
this.clear();
window.alert("U heeft uw code gekrast");
window.location.href='compleet.php';
}
}
});
$('#krasvak').wScratchPad('bg', 'images/slide1.png');
$('#krasvak').wScratchPad('fg', 'images/overlay.png');
$('#krasvak').wScratchPad('size', 10);
</script>