Question

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

我需要创建一个网页，其上有一个固定大小的“单元格”网格，每个单元格将是150像素乘150像素。这是样本6x3网格，但我的网格大小不同（4x10或3x5等，根据数据库数据）：

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |       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肯定不是我的力量。我已经在这方面工作了一段时间，并且已经看过/使用了很多关于如何做各种组件的例子。我还没有找到任何可以工作的东西。

Answer 1

就我个人而言，我认为桌子是魔鬼，所以这里更像是我会用浮动的div来做的事情：

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

您可以轻松地替换图像的文本内容，或通过CSS添加背景图像，以及根据每个“控制”div所具有的九个类来调用单独的JS函数。

修改

Here is the most current version of the solution，它包含一个实际的表而不是display: table-cell，以及图像和包装的附加示例标记，以及一个基本的Javascript示例。这样做是为了解决旧浏览器支持的问题，并满足KM的要求。虽然整体结构与原来的小提琴几乎相同。

Answer 2

我确实会选择一张大桌子。

并不是很难完成，至少如果这或多或少是你所需要的：

http://jsfiddle.net/gNBSc/4/

（我有点无聊，今天： - ）

Answer 3

我刚刚想出了这个解决方案http://jsfiddle.net/LNw3G。使用table和div元素之间存在混合。

我还添加了一个图像 sprite ，通过类名 left ， center ， right ， top 和 bottom （因此您不必编辑css中的所有图像位置），javascript用于根据锚class解析特定的调用。< / p>

这是单个单元格的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>

这是重要的javascript代码，它将包含link类名称的锚点过滤到所需的特定功能：

$(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;
}

已经测试过IE7 +，FF，Chrome，Safari和Opera。

Ps：您可以在此示例中使用 IE6 的解决方法，包括添加特定的 hover.htc 文件和css行body { behavior: url(hover.htc); } （more detailed here）模拟非锚点元素的悬停效果。

Ps：小心<!DOCTYPE声明。如果你留下空格，也许是这样的<! DOCTYPE，IE7可能会把它视为无效跳入怪癖模式（测试时，它让我疯了！）。

Answer 4

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

修改：现在文本也是垂直对齐的。

Answer 5

http://jsfiddle.net/F37qs/1/

几乎是你想要的一个例子

浮动div ...允许自定义“表格大小”;
反应性翻转“abit randomized”;最后，
集中内容（请参阅每个网格中的集中文本）;

注意：您可以调整所需的各种行数/列数。 =）

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

5 个答案: