困难的HTML，JavaScript，CSS网格页 [英] difficult HTML, JavaScript, CSS grid page
问题描述
FYI，这是我正在处理的简化/通用示例。我只是寻找可以使这项工作的HTML，JavaScript和/或CSS。我更喜欢这可以在没有任何javascript库。此外，页面将基于从数据库加载的数据构建。这只需要在较新的IE / Firefox浏览器中工作。
我需要创建一个具有固定大小网格网格的网页，每个单元格为150像素×150像素。这里是示例6x3网格，但我的网格的大小（根据数据库数据为4x10或3x5等）不同：
-------------------------------------
| | | | | | |
| | | | | | |
| | | | | | |
-------------------------------------
| | | | | | |
| | | | | | | 6x3网格的细胞
| | | | | | |
-------------------------------------
| | | | | | |
| | | | | | |
| | | | | | |
-------------------------------------
每个单元格都需要以下内容：
1） / strong>包含150像素x 150像素的主图片。此图像将需要在浏览器中更改，希望尽可能使用CSS sprites。
2）当我们把所有这些图片粘贴到一个文件中，鼠标在单元格上方，将显示可点击图像的叠加。在下面的示例中，我使用字母，但图像不会是字母，更像图标。这些点击需要能够运行不同的每个图像javascript功能（因此点击A图像将运行功能A，而点击F将运行功能F等）。图像将依赖于数据库信息，因此对于不同的单元格，一些将包括而其他不包括。它们在细胞内的位置将始终是固定和控制的。这里是单个单元格可能看起来与顶部的图像（字母）：
---------
| ABC |
| D E F |所有覆盖图像出现的单个单元
| G H I |
---------
---------
| A C |
| E |一个单元格，其中只有一些重叠图片出现
| G |
---------
3）自由文本换行和在单元格中居中。这将是最好的，如果这个自由文本在主图像＃1之上和可点击的图像＃2之下，但如果它是在一切之上，那将是好的太。此文本将有一个合理的长度限制，因此滚动超过150px x 150px不应该是一个问题，但它需要换行。
这不是家庭作业！和HTML / javascript / CSS肯定不是我的力量。我一直在这个工作了一段时间，看过/工作了很多例子，如何做各种组件的这一点。
我个人认为表是魔鬼，所以这里是更像我会做的使用浮动的divs：
您可以轻松替换图片的文字内容，或者通过CSS，以及基于每个控制div具有的九分类调用单独的JS函数。
编辑： >
这是最新版本的解决方案，它包括一个实际的表，而不是使用 display：table-cell ，以及图像和包装的附加示例标记，以及一个基本的Javascript示例。这是为了解决旧版浏览器支持的问题，并满足KM的要求。虽然整体结构仍然与原来的小提琴相同。
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.
Personally I think tables are the devil, so here is something more like what I would do that uses floated divs:
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.
这篇关于困难的HTML，JavaScript，CSS网格页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
