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


Creating an Image/Grid solution with CSS and Javascript

我正在建立一个新的网站,并寻找解决这个问题(PHP, MySQL,使用Zurb基金会)。

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

所以-三个困境:

  1. 我如何构建数据?
  2. 我如何创建一个图像与可点击的部分没有图像?
  3. 我如何塑造页面,使它不会加载缓慢?

谢谢!Dana

所以你可能想用一个表来存储你所有的图像:

<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/但是在更大的规模上,尝试制作一个javascript函数,使图像更大,并将图像的src设置为从mySql数据库获取的变量。

多嘴多舌