Katie Sak Katie Sak - 5 months ago 24
jQuery Question

Issues with changing cursor image on change of cursor - Canvas Drawing App

I'm creating a canvas drawing app and I want to be able to load my cursor images for each tool while clicking on the tool. I had this working until I did a little redecorating and changed the layout. I put the tools inside a table with the redesign, but I don't think this should be the problem. Thank you for all your help.

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


<div class="tools2">



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




****************JQUERY**********************

<script>


$('.tools2 a div').each(function() {
$(this).click(function () {
setCursor($(this).attr('id'));
});
});






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

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


}

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

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





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

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

function setEraser(){

shape = SHAPE_TYPE.ERASER;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_eraser.png) 0 130, auto');
}
function setFill(){
shape = SHAPE_TYPE.FILL;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/bucket.png) 0 130, auto');
}

function setCircle(){
console.log('init.js: setCircle(): circle');
shape = SHAPE_TYPE.CIRCLE;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_circle.png)0 130, auto');
}
function setRectangle(){
console.log('init.js: setRectangle(): rect');
shape = SHAPE_TYPE.RECTANGLE;
$('.canvas-boards').css('cursor', 'url(../assets/imgs/tools/cursor_rectangle.png)0 130, auto');



}



Answer

First remove the number "2" in the class <div class="tools">

second the path is wrong, corretion:

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

https://jsfiddle.net/nr6yn2yz/