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

仅供参考，这是我正在研究的一个简化/通用示例。我只是在寻找HTML、JavaScript和/或CSS来实现这一点。我希望这可以在没有任何javascript库的情况下完成。此外，该页面将基于从数据库加载的数据构建。这只需要在更新的IE/Firefox浏览器中使用

我需要创建一个网页，有一个固定大小的网格上的“细胞”，每个细胞将是150像素的150像素。这里是示例6x3网格，但我的网格大小会有所不同（4x10或3x5，等等，根据数据库数据）：

每个单元都需要以下各项：

1）包含150像素乘150像素的“主”图像。此图像需要在浏览器中更改，如果可能，希望使用CSS精灵。我想将所有这些图像粘贴到一个文件中，然后裁剪到每个单元格中所需的内容

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肯定不是我的强项。我已经在这方面工作了一段时间，并且已经看到/使用了许多关于如何完成这项工作的各个部分的示例。当我把所有的东西都放在一起时，我还没有找到任何能起作用的东西。

事实上，我想要一张大桌子

要做到这一点并不难，至少如果这或多或少是你所需要的：

---

（我今天有点无聊：-）

我个人认为桌子是魔鬼，所以这里有一些更像我使用浮动div的方法：

您可以轻松地为图像交换文本内容，或者通过CSS添加背景图像，还可以基于每个“control”div拥有的一个9类调用单独的JS函数

编辑：

---

，它确实包括一个实际的表，而不是使用

显示：表单元格

，以及用于图像和包装的附加示例标记，以及一个基本的Javascript示例。这样做是为了解决旧浏览器支持的问题，并满足KM的要求。尽管整体结构与最初的小提琴基本相同。

我刚刚提出了这个解决方案。它是

table

和

div

元素的混合使用

我还添加了一个图像精灵，通过类名左、中、右、上和下定位（这样您就不必编辑css中的所有图像位置），以及javascript，用于根据锚

类来解析特定调用

这是单个单元格的HTML示例
cell wrap cell1
包含背景图像精灵的元素和位置，表格垂直对齐文本，
cell
包含包装到
image
div中的受控定位图像

<div class="cell-wrap cell1">
    <table class="content">
        <tr>
            <td>Connection is not correct</td>
        </tr>
    </table>
    <div class="cell hidden">
        <div class="image left top">
            <a href="#linkA" class="linkA"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image right top">
            <a href="#linkB" class="linkB"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image left bottom">
            <a href="#linkC" class="linkC"><img src="http://goo.gl/wNDMe"></a>
        </div>
    </div>
</div>

它已经过IE7+、FF、Chrome、Safari和Opera测试

Ps:IE6有一个变通方法，您可以在这个示例中使用，包括添加一个特定的hover.htc文件和css行
body{behavior:url（hover.htc）；}
（）来模拟非锚元素上的悬停效果

Ps：小心
，试试看，你可以找到它。如果误解了什么，请告诉我。在FF5、最新Chrome、IE8（以及IE7兼容模式）下测试。不使用库，不需要实际成为网格（取决于可以在CSS中设置的宽度），并提供图像索引和单击的按钮。哦，网格应该很容易在PHP中生成（基于数据库），等等

编辑：
文本现在也垂直对齐。

这是一个很好的例子

浮动div的。。。允许自定义“表大小”
反应性翻转“abit随机化”；最后
集中内容（参见每个网格中的集中文本）
注意：您可以调整所需的各种行数/列数。=）
 这可能是display:table（以及相关的显示样式）的工作，特别是因为您的目标浏览器是支持这些样式的较新浏览器。桌子是一种选择吗？比如说，每个tablecell（根据数据库数据生成）都有自己的可以使用的div（可能还有自己的css）。只是一个thought@Gobbledigook，是的，我对桌子很在行。@KM。请看一下我的解决方案，如果有什么不符合您的预期，请告诉我。您不需要表格来完成此操作。谢谢，这看起来很有希望！我把这段代码下载到我的电脑上，然后把它弄得乱七八糟。我将行折叠起来，形成一个2x6网格，鼠标悬停在新行上不起作用。当我尝试用本地图像替换“”时，它仍然保留“50 x 50”。此外，我无法从“50x50”图像中获取
onclick=“alert（'wow！”）；”
工作。使用新的fiddle、额外的行（不明白为什么这不能在本地工作）和onclick更新了我的答案。您所说的“保留50x50”是什么意思？对于新的示例，我仍然认为
<div class="cell-wrap cell1">
    <table class="content">
        <tr>
            <td>Connection is not correct</td>
        </tr>
    </table>
    <div class="cell hidden">
        <div class="image left top">
            <a href="#linkA" class="linkA"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image right top">
            <a href="#linkB" class="linkB"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image left bottom">
            <a href="#linkC" class="linkC"><img src="http://goo.gl/wNDMe"></a>
        </div>
    </div>
</div>

$(function() {
    $(".cell a").click(function(e) {
        if ($(this).attr("class").match(/link(.)(\\s[\\b]*)?/)) {
            var param = $(this).attr("class").replace(/(.*\s)*link(.).*$/, "$2");
            doThings(param);
        }
    });
});

function doThings(param) {
    switch (param) {
    case 'A':
        //specific 'A' functions
        break;
    case 'B':
        //specific 'B' functions
        break;
    default:
        //default functions
        break;
}