Let's say I have an html table (50 x 50 cells) with a yellow background. I would like to use the background colors of the cells to print letters (A-Z) (e.g. some cells blue and most cells yellow) in an animated loop, using jQuery. I can create a table and a pointer which can loop through all the cells of the table such that it can change the background color of a particular cell (x,y) to different color. However, I don't understand which cells to highlight to form a particular letter. For example, to display the letter "A" on the 50 x 50 grid, which cells do I need to change to a new background color such that I get the letter A displayed on the screen with the cells, and so on for all the other letters. Is there any pattern for this?

Let's say I have an html table (50 x 50 cells) with a yellow background. I would like to use the background colors of the cells to print letters (A-Z) (e.g. some cells blue and most cells yellow) in an animated loop, using jQuery. I can create a table and a pointer which can loop through all the cells of the table such that it can change the background color of a particular cell (x,y) to different color. However, I don't understand which cells to highlight to form a particular letter. For example, to display the letter "A" on the 50 x 50 grid, which cells do I need to change to a new background color such that I get the letter A displayed on the screen with the cells, and so on for all the other letters. Is there any pattern for this?

• javascript
• jquery
• html
• html-table
• cell

Share Improve this question Follow edited Jan 11, 2018 at 17:58 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 29, 2012 at 9:47 cam lovercam lover 5711 silver badge77 bronze badges 7

• I can't quit grasp what you're trying to achieve. – Yoshi Commented Mar 29, 2012 at 9:54
• Am i correct in the assumption that you are trying to implement some obscure CAPTCHA or something? – Kaii Commented Mar 29, 2012 at 9:54
• Not really. I just want to create an animation such that, it would display a persons' name in a loop. For example "Kai" would display K first followed by A, then I – cam lover Commented Mar 29, 2012 at 9:57
• 2 There's no shortcut to happiness here. Take your favorite graphics editor, create a new image sized 50x50 pixels, insert a character and see which pixels it occupies. – JJJ Commented Mar 29, 2012 at 9:59
• Or if you're not married to tables you could draw a character to a 50x50 canvas and scale it up. – JJJ Commented Mar 29, 2012 at 10:00

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

Create the cells with a loop such as:

for(var i=65;i<=90;i++) {
    console.log(String.fromCharCode(i));
 }

(65 is the char code for A, 90 for Z). in the loop, attach id with the char. something like "charA", "charB". Than you can access the fields searching the id <"char" + letter>.

if you know only the (x,y) in the 50x50 grid, calculate which letter it is with:

String.fromCharCode(65+y*50+x);

Or take the value of it from the elment itself

$(this).val();

Or from attribute you attach to it:

$(this).attr('letter')

Use Canvas (Edit: only for the generation of the letter coordinates in the 50x50 grid, no usage of canvas afterwards).

• For each letter possible, print the char on a 50x50 html5/javascript canvas in black and white using something like: http://typeface.neocracy/examples.html

• Then access the canvas in each pixel to check if it black or white, and save it in multidimensional javascript arrays. getPixel from HTML Canvas?

• print the output and create javascript code or JSON object that saves those coordinates for your use.

After that you'll have all you need: the coordinates for each letter, and (bonus) with a font of your choice.