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

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>

非常简单，您不需要添加任何“粗糙”的标记，或者根本不需要添加任何标记。使用 CSS 为每个项目设置相应的样式。 Here's a tutorial。不过它有点老了——现在每个现代浏览器都支持:last-child，所以你不需要任何 JavaScript，除非你担心那些 IE6/7/8 用户。