standard sizing for cross browser cursor images?? jquery change of cursor images

杀马特。学长 韩版系。学妹 提交于 2019-12-13 07:07:55

问题


My cursor images were working as saved 128px x 128px pngs but now they are not in any browser :( did something change?? I have posted a problem a few days ago regarding my cursor images not changing with a onclick for my drawing application. I had help with my initial problem and you can see it is being called properly in the console and everything is great, but the image won't change from the brush image. I think it might be something to do with the sizing but I am not 100% sure. Any help would be greatly appreciated:

***************HTML*************************

<div class="tools">
<table>
<tr>
<th>
<div id="brush">
<input type="image" class="line" src="./assets/tools/brush.png" />
</div>
</th>
<th> 
<div id="bucket">
<input type="image" class="line" src="./assets/tools/bucket.png" onclick="setFill()" />
</div>
</th>
<th> 
<div id="eraser">
<input type="image" class="line" src="./assets/tools/eraser.png" onclick="setEraser()" />
</div>
</th>
<th>
<div>
<form onsubmit='return false;'>
<input type='image' src="./assets/tools/clear_brush.png" class="line" id="clear" onclick='clear_canvas_rectangle ()'> 
</form> 
</div> 

</th> 

</tr>
</table>
</div> 

**************************JS*******************************

$('.tools table tr th div').each(function() {
$(this).click(function () {
console.log($(this).attr('id
setCursor($(this).attr('id'));
});
});



function setCursor(id) {
console.log("init.jsCursor(): id: " + id);

switch (id) {
case 'brush':
shape = SHAPE_TYPE.LINE;
break;
case 'eraser':
shape = SHAPE_TYPE.ERASER;
break;
case 'fill':
shape = SHAPE_TYPE.FILL;
break;


}



console.log("image: " + 'cursor_' + id + '.png');

$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_' + id + '.png)0 130, auto');


$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_brush.png) 0 130, auto');
}

function setLine(){
console.log('init.jstLine(): brush');
shape = SHAPE_TYPE.LINE;
$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_brush.png)0 130, auto');
}

function setEraser(){
console.log('init.jstEraser(): eraser');
shape = SHAPE_TYPE.ERASER;
$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_eraser.png)0 130, auto');
}


function setFill(){
shape = SHAPE_TYPE.FILL;
$('.canvas-boards').css('cursor', 'url(../assets/tools/cursor_bucket.png)30 120, auto');
}

来源:https://stackoverflow.com/questions/37800914/standard-sizing-for-cross-browser-cursor-images-jquery-change-of-cursor-images

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!