使用 CSS 和 Javascript 创建图像/网格解决方案 [关闭]

Posted 2023-02-24

【中文标题】使用 CSS 和 Javascript 创建图像/网格解决方案 [关闭]

【英文标题】：Creating an Image/Grid solution with CSS and Javascript [closed]

【发布时间】：2014-10-15 00:06:37

【问题描述】：

我正在建立一个新网站并为这个问题寻找解决方案（php、mysql、使用 Zurb Foundation）。

我想创建一个可以放大和缩小的图像，它将由 1,000,000 块组成。 每件作品都应该是可点击的，点击后更多信息应该从后端到达。 每件作品的颜色也取决于来自数据库的信息。碎片就像像素。

所以 - 三个困境：

如何构建数据？ 如何创建带有可点击片段但没有图片的图片？ 如何调整页面以使其不会加载缓慢？

谢谢！ 达娜

【问题讨论】：

关于3 - 如果您的图像提前准备好，请尝试在sprite中使用w3schools.com/css/css_image_sprites.asp

您可能希望使用 AJAX 之类的东西来访问数据 - 如果您有一百万条数据，您并不真的希望它们一次全部显示在页面上。每件都是方形的吗？它们是否会像像素一样（即每个正方形都是纯色 - 然后组合形成更大的图像？）。如果是这样，您可以使用表格结构构建一个大网格并设置每个单元格的背景 - 主要问题是找出一种将图像转换为一系列彩色单元格的方法（无需手动执行 - 这需要年）。

@Kez 一张桌子是我最初的想法，但我不想对自己这样做..

老实说，尝试加载包含一百万个单元格的表格可能会带来很多麻烦。我认为如果您要这样做，可能需要使用 SVG，尤其是当您想要放大和缩小时。我怀疑你可能需要研究一种更强大的语言来实现它。

【参考方案1】：

所以您可能想使用一个表格来存储您的所有图像：

<table>
  <tr>
    <td>   <a> Each small image </a>   </td>
    <td>   <a> Each small image </a>   </td>
  </tr>
  <tr>
    <td>   <a> Each small image </a>   </td>
    <td>   <a> Each small image </a>   </td>
  </tr>
</table>

不过，如果您这样做，您应该使用小图像来缩短加载时间。这应该会停止页面加载缓慢。

编辑：如果您尝试执行以下操作： http://css-tricks.com/examples/NineImages/ 但比尝试制作一个使图像更大并将图像的 src 设置为从 mySql DB 获取的变量的 javascript 函数更大的规模。

加布

【讨论】：

这是你想要做的吗？