用照片创建树形图的技术？

Question

我正在寻找使用PHP，HTML和CSS创建动态树图。下面的模拟：

图像需要是可点击的链接，我不想使用图像地图，因为这对于动态生成而言代价很高。

我正在考虑使用一些有创意的<div>展示位置：

其中虚线表示不可见边框，实线表示可见边框。 html会非常粗糙，但生成它的代码应该只是一些干净的循环。

有更好的方法吗？

Answer 1

您需要生成的HTML结构是一个简单的旧嵌套列表，例如：

<ul>
  <li>Group 1
    <ul>
      <li><a href="foo">Item 1</a></li>
      <li><a href="bar">Item 2</a></li>
    </ul>
  </li>
  <li>Group 2
    <ul>
      <li><a href="baz">Item A</a></li>
    </ul>
  </li>
</ul>

死得很简单，你不需要添加任何＆＃34; gnarly＆＃34;标记，或任何标记。使用CSS相应地设置每个项目的样式。 Here's a tutorial。它虽然年纪稍大 - 但现在每个现代浏览器都支持:last-child，因此您不需要任何JavaScript，除非您关注那些IE6 / 7/8用户。