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当然不是我的实力.我已经在这个工作了一段时间,并看过/工作了很多例子,如何做各种各样的组件.我还没有找到任何可以工作的东西,当所有的东西放在一起.
