0

建物（博物館）には7つのレベル（+3から-3）があり、それぞれが異なる部屋/エリアに分割されています。エリアにカーソルを合わせると、そのエリアを説明するポップアップが表示されます。

7つのレベルとその領域を正確に表すマークアップを探しています。計画は意味があり、CSS/JSなしで「ナビゲート可能」である必要があります。

編集：いくつかの明確化、マークアップは、空間レイアウトではなく、建物の「セマンティック構造」を表すだけで済みます（CSSはレイアウトとグラフィックスを追加します）。

4

4 に答える 4

2

ネストされた順序付けられていないリストのようなにおいがします。

于 2008-12-23T13:23:50.150 に答える
1

SVGの仕事のように聞こえますか？（サンノゼのサンプルAdobe Building）

これはJavaScriptを使用していると思いますが、7階建て* 10室以上の場合はどうでしょうか？これは純粋なCSSではかなり厄介になります。いくつかの<ul>要素を使用して部屋のネストされたレベルを作成することもできますが、建物がこれほど大きい場合、リストは（ブロックとしてレンダリングされたとしても）表示する意味がないと思います。

于 2008-12-23T13:17:21.100 に答える
1

microformats、特にXOXO Microformatを見てください。

于 2008-12-23T14:03:12.473 に答える
1

HTML5 を使用する (ただし、HTML 4.01 を使用したい場合は大きな違いはありません):

建物を画像で表現したい場合は、とで構成されるImage Mapを使用できます。(属性)は、部屋の詳細な説明を含むページにリンクできます。属性には、「いちごの部屋 (レベル 4)」のように、部屋の簡単な説明を含めることができます。mapareaareahrefalt

マークアップが代替テキストに近い場合 (たとえば、 などを使用する場合)、見出し構造を使用しますobject。canvas

<section>
 <h1>The building</h1>

 <section id="level-1">
  <h1>Level 1</h1>

   <section id="level-1-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-1-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-1 -->

 <section id="level-2">
  <h1>Level 2</h1>

   <section id="level-2-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-2-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-2 -->

</section>

(HTML 4.01 の場合は、div代わりに使用しsection、それに応じて見出しレベルを調整します)

于 2012-08-27T09:39:46.717 に答える