困难的HTML,JavaScript,CSS网页

FYI,这是我正在开展工作的一个简化/通用的例子.我只是寻找可以使这项工作的 HTML,JavaScript和/或CSS.我更喜欢这可以没有任何JavaScript库.此外,该页面将基于从数据库加载的数据构建.这只需要在较新的IE / Firefox浏览器中工作.

我需要创建一个具有固定大小“单元格”网格的网页,每个单元格将为150像素乘以150像素.这里是6×3网格示例,但是我的网格会根据数据库数据而有所不同(4×10或3×5等)：

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

这些单元格中的每一个将需要以下内容：

1)包含150像素×150像素的“主”图像.这个图像需要在浏览器中进行更改,希望可以使用CSS sprites.我想将所有这些图像保存在一个文件中,并将其缩小到每个单元格所需的内容.

2)当鼠标悬停在“单元格”上时,将显示可点击图像的叠加.在下面的示例中,我使用字母,但图像不会是字母,更像图标.这些点击需要能够运行不同的每个图像的JavaScript函数(所以点击“A”图像将运行功能A,而点击“F”将运行功能F等).图像将依赖于数据库信息,因此对于不同的单元格,一些将被包括,而另一些不是.它们在单元格内的位置将始终是固定和控制的.这是一个单个单元格可以与顶部的图像(字母)一起看：

---------
|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)自由的文本包装和居中的单元格.如果这个免费文本位于主图像#1之上,并且在可点击的图像#2之下,那么这将是最好的,但如果它是所有的东西,而不是也可以.这个文本的长度限制会有一个合理的限制,因此滚动超过150px x 150px不应该是一个问题,但它需要包装.

为了纪录,这不是功课！和HTML / javascript / CSS当然不是我的实力.我已经在这个工作了一段时间,并看过/工作了很多例子,如何做各种各样的组件.我还没有找到任何可以工作的东西,当所有的东西放在一起.