写真付きツリー図を作成する方法は？

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をサポートしていますので、IE6/7/8ユーザーが心配している場合を除き、JavaScriptは必要ありません。