Changing the look of the cursor

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.

possible duplicate of [Using external images for CSS custom cursors](http://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors) — WeSt, Sep 03 '14 at 14:24
possible duplicate of [Custom Cursor Image CSS](http://stackoverflow.com/questions/336925/custom-cursor-image-css) — pjmorse, Sep 03 '14 at 14:27

score 1 · Accepted Answer · answered Sep 04 '14 at 09:47

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>

Thank you very much it worked, really appriciate it :) – Bramos Sep 04 '14 at 09:56 — Bramos, Sep 04 '14 at 09:56

score 0 · Answer 2 · answered Sep 03 '14 at 14:24

0

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

answered Sep 03 '14 at 14:24

BCartolo

720
4
21

@Bramos Open the web console. What errors do you see there? – BCartolo Sep 03 '14 at 14:29
I see no error's. it's like the browser doesn't even know the code is there. – Bramos Sep 03 '14 at 14:32
@Bramos Ok. Show us the whole html code. Maybe you are assigning the css property to a different element, etc. – BCartolo Sep 03 '14 at 14:33
@Bramos You have cursor twice! Change cursor: 'cursor: url("images/muntje.png"), auto;' By cursor: 'url("images/muntje.png"), auto;' – BCartolo Sep 03 '14 at 14:36
oeps forgot to undo that before copying, but still not doing the thing. – Bramos Sep 03 '14 at 14:38

score 0 · Answer 3 · answered Sep 03 '14 at 14:26

0

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.

answered Sep 03 '14 at 14:26

gidomanders

465
5
16

What is your directory structure? If you give the directory tree I can check what path is correct. – gidomanders Sep 03 '14 at 14:41
this is the path to the image C:\xampp\htdocs\Bram\Scratch the code\images – Bramos Sep 03 '14 at 14:49
What is the path of the CSS file? – gidomanders Sep 03 '14 at 14:54
there is none css file only java script and html – Bramos Sep 04 '14 at 07:14

score 0 · Answer 4 · answered Sep 03 '14 at 14:27

0

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");

answered Sep 03 '14 at 14:27

Sunand

703
4
9

score 0 · Answer 5 · answered Sep 04 '14 at 07:26

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>

it no shows an "crosshair" that stands in the java script file, i shall put a part of the java script in the question so you could take a look at it please. — Bramos, Sep 04 '14 at 09:32

Changing the look of the cursor

5 Answers5