Recently, I used javascript to enhance the cursor icon size on a webpage and incorporated a table. Now, I am looking for a way to change the background color of all overlapping elements in the table when the cursor icon interacts with them (during click and drag actions). Essentially, I want to expand the selection area affected by mousedown or mouseover events to allow for selecting multiple elements simultaneously. Is there a method to achieve this functionality and if so, how can it be implemented?
Below is the code snippet for clicking:
$('td').on('mousedown', function (e1) {
loop();
flag = 1;
$('td').on('mousemove', function (e2) {
console.log(document.elementsFromPoint(e2.pageX, e2.pageY));
if (flag == 1) {
var tableCell = $(this);
var setbox = $('.active').attr('id');
switch (setbox) {
case "lPark":
$(this).css('background-color', 'green');
break;
}
}
});
}
And here is the code snippet for increasing cursor size:
var cursor = document.createElement('canvas'),
ctx = cursor.getContext('2d');
cursor.width = 100;
cursor.height = 100;
var centerX = cursor.width / 2;
var centerY = cursor.height / 2;
var radius = 40;
// Code continues...
To visualize my objective, you can view the image at the following link: https://i.sstatic.net/GWCnd.jpg
In summary, while the current setup allows only one cell to be selected when the cursor hovers over multiple cells, I aim to enable the selection of all intersecting cells.