困难的HTML,JavaScript,CSS网格页面

Question

仅供参考,这是我正在研究的简化/通用示例.我只是在寻找可以使这项工作的HTML,JavaScript和/或CSS.我更喜欢这可以在没有任何javascript库的情况下完成.此外,将根据从数据库加载的数据构建页面.这只需要在较新的IE/Firefox浏览器中工作.

我需要创建一个网页,其上有一个固定大小的"单元格"网格,每个单元格将是150像素乘150像素.这是样本6x3网格,但我的网格大小不同(4x10或3x5等,根据数据库数据):

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

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

1)包含150像素乘150像素的"主"图像.这个图像需要在浏览器中更改,如果可能的话,希望使用CSS sprites.我想将所有这些图像粘贴到一个文件中,并将其缩小到每个单元格中所需的内容.

2)当鼠标悬停在"Cell"上时,将显示可点击图像的叠加.在下面的示例中,我使用字母,但图像不是字母,更像是图标.这些点击需要能够运行不同的每个图像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肯定不是我的力量.我已经在这方面工作了一段时间,并且已经看过/使用了很多关于如何做各种组件的例子.我还没有找到任何可以工作的东西.

Answer 1

我个人认为桌子是魔鬼,所以这里更像是我会用浮动的divs做的事情:

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

您可以轻松地替换图像的文本内容,或通过CSS添加背景图像,以及基于每个"控制"div具有的九个类调用单独的JS函数.

编辑:

这是该解决方案的最新版本,它包括一个实际的表而不是使用display: table-cell,以及图像和包装的附加示例标记,以及一个基本的Javascript示例.这样做是为了解决旧浏览器支持的问题,并满足KM的要求.虽然整体结构仍然与原始小提琴几乎相同.