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');
}
Aucun commentaire:
Enregistrer un commentaire