更改光標的外觀

Question

我正在製作在線刮刮卡，我需要知道如何將光標更改爲硬幣。

這裏是我已經嘗試了代碼示例：

<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> 

這裏是java腳本代碼

$.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. 
}; 

我真的並欣賞它，如果有人可以幫助我的一部分出。

Answer 1

根據該插件的github有一個解決方案：在飛

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

---

---

更新那麼試試這個：

<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

語法

光標：網址（URL到圖像）

我不建議磁盤路徑（他們可能甚至不工作）。使用相對路徑，即

../Scratch代碼/圖像/ muntje.png

Answer 3

試試這個：

cursor: url("images/muntje.png"), auto; 

製作到圖像目錄確保路徑是正確的，相對於您的CSS文件所在的路徑。

Answer 4

如果u想給的完整路徑和訪問HTML文件在本地

cursor: url("file://C:/xampp/htdocs/Bram/Scratch the code/images/muntje.png"); 

Answer 5

把它放在CSS，而不是在JavaScript喜請使用路徑類似

cursor: url("/Bram/Bram/Scratch the code/images/muntje.png"); 

。也許這是有效的。

<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>