Question

Remember imagemaps? They were all over the place in the 90s. A webpage would have an image on it, and when you clicked on it, it could take some action based on not just the image, but the exact pixel that you clicked.

Now, let’s say that I’ve got some text in a div, rendered in a monospaced font, arranged as a 2D grid. Is there any way to put some Javascript on the div so that if I click on any character in that grid, it’ll trigger a script and give it the index of the character I clicked on?

I know I could brute-force this by surrounding every single character in the grid with its own customized <a> tag, but is there any simpler way to do it?

Answer 1

Here’s a jsfiddle that proves the concept and seems to work. Each click will log to the console the matrix index of the letter clicked. (it’s 0-based and column, row)

• Put your text into a monospaced grid
• attach a handler to the onClick of the containing element
• Compute the dimensions of a single letter (such as “m”) using a hidden element with just 1 letter
• divide event.clientX and event.clientY by the dimensions of a single letter to get the coordinates of your clicked letter within your text

See also calculate text width with javascript.