difficult HTML, JavaScript, CSS grid page

Question

FYI, This is a simplified/generic example of what I'm working on. I'm just looking for the HTML, JavaScript, and/or CSS that can make this work. I'd prefer that this can be done without any javascript library. Also, the page will be built based on data loaded from a database. This only needs to work in newer IE/Firefox browsers.

I need to create a web page that has a grid of fixed size "cells" on it, each cell will be 150 pixels by 150 pixels. Here is sample 6x3 grid, but my grids will vary in size (4x10 or 3x5, etc. as per the database data):

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |       6x3 grid of "cells"
|     |     |     |     |     |     |
-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------

each of these cells will need the following:

1) contain a "main" image that is 150 pixels by 150 pixels. This image will need to be changed in the browser, hopefully using CSS sprites if possible. I'd like to stick all of these images into a single file and crop down to what is needed in each cell.

2) When the mouse is over a "Cell", an overlay of click-able images will display. In the sample below I use letters, but the images will not be letters, more like icons. These clicks need to be able to run a different per image javascript function (so a click on the "A" image will run function A, while a click on "F" will run function F, etc). Images will be dependent on database info, so for different cells, some will be included and other not. Their position within the cell will always be fixed and controlled. Here is what a single cell might look with the images (letters) over top:

---------
|A  B  C|
|D  E  F|     a single cell where all overlay images appear
|G  H  I|
---------

---------
|A     C|
|   E   |     a single cell where only some overlay images appear
|G      |
---------

3) free text wrapping and centered within the cell. It would be best if this free text was above the main image #1 and below the click-able images #2, but if it was on top of everything than that would be OK too. There will be a reasonable length limit on this text, so scrolling beyond the 150px x 150px should not be an issue, but it will need to wrap.

For the record, this is not homework! and HTML/javascript/CSS is certainly not my strength. I have been working at this for a while and have seen/worked with many examples of how to do various components of this. I've yet to find anything that can work when everything id put together.

Answer 1

Personally I think tables are the devil, so here is something more like what I would do that uses floated divs:

http://jsfiddle.net/gbcd6/11/

You could easily swap out the text content for images, or add background images through CSS, as well as call separate JS functions based on the one-nine class each "control" div has.

EDIT:

Here is the most current version of the solution, which does include an actual table rather than using display: table-cell, as well as additional example markup for images and wrapping, and a basic Javascript example. This was done to fix an issue with older browser support, and to meet KM's requirements. Though the overall structure is still pretty much the same as the original fiddle.