Select multiple grid positions with click and hold

Hi All!

Picture a grid. I’d like to click and hold 1 cell and drag the mouse and have it highlight the cells to the side while I am still “down-clicked”. When I release the mouse button I would like the selection from the “mouse-Down” to the “mouse-up” to be highlighted.

How do I do this?

I started with the map and area tags. Is this the way to go?

If I didn’t provide enough info please let me know. I’ll expand as best I can.

Thanks everyone

Do you have a link to the project code you have so far? If not, then copy/paste into a reply. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


I don’t have much yet. As it grows I’ll post my Pen. What I have so far:

<img src="tracks"style="align:bottom; height:200px" usemap="#planetmap">
    <map name="planetmap">
  <area shape="rectangle" coords="169,172,190,29" href="#" alt="Sun">


This has given me 1 link over 1 portion of my image. I can continue so that I have links over the entire area I need (picture a set of train tracks and you want to select a portion of them).

Should I continue doing this and just make functions for when I click and when I release? Is this possible? To have all the items highlight in between down click and up click?

Thanks for your time.

You can use a combination of clientX and

document.body.onmousedown = function() { 
 //change in behaviour that counts as "selected"

to determine where the mouse is located and if it’s pressed. Then you introduce a change in behaviour that counts as “selected”.