Hey Leute,
ich bin gerade dabei eine Website für eine Fotografin zu machen. Sie ist eigentlich recht simpel gestaltet, doch der Aufbau vom CSS und HTML (oder Java?) macht mir bei der Menüführung ein bisschen zu schaffen.
Ich habe vor, ein Menü aus Rollover Bildern zu machen, wobei noch zusätzlich jeweils kleine Teaserbilder rechts daneben je nach Menüpunkt auftauchen sollen. Also wenn ich über den Menüpunkt "Portrait" fahre, rechts ein kleines Bild mit einem Portraitfoto erscheint usw.. Ich habe zwar schon herum gegooglet aber bin bisher auf keinen gescheiten Lösungsansatz gekommen.
Bei http://www.on-mousover.de gibt es ein ähnlich Beispiel aber mit Frames. Ich habe aber nicht vor mit Frames, sondern mit Divs zu arbeiten.
hier noch eine Grafik, wie es dann am Ende aussehen soll:
http://dl.dropbox.com/u/40265443/bsp_menu.png
So jetzt zum Code (ich hoffe, dass ich den richtigen Ansatz gewählt habe)
ich bin gerade dabei eine Website für eine Fotografin zu machen. Sie ist eigentlich recht simpel gestaltet, doch der Aufbau vom CSS und HTML (oder Java?) macht mir bei der Menüführung ein bisschen zu schaffen.
Ich habe vor, ein Menü aus Rollover Bildern zu machen, wobei noch zusätzlich jeweils kleine Teaserbilder rechts daneben je nach Menüpunkt auftauchen sollen. Also wenn ich über den Menüpunkt "Portrait" fahre, rechts ein kleines Bild mit einem Portraitfoto erscheint usw.. Ich habe zwar schon herum gegooglet aber bin bisher auf keinen gescheiten Lösungsansatz gekommen.
Bei http://www.on-mousover.de gibt es ein ähnlich Beispiel aber mit Frames. Ich habe aber nicht vor mit Frames, sondern mit Divs zu arbeiten.
hier noch eine Grafik, wie es dann am Ende aussehen soll:
http://dl.dropbox.com/u/40265443/bsp_menu.png
So jetzt zum Code (ich hoffe, dass ich den richtigen Ansatz gewählt habe)
HTML:
<body>
<div class="back" id="back">
<div id="aktiv_menu">
<ul id="port_menu">
<li><a href="Portfolio.html" class="Portfolio">Portfolio</a></li>
</ul>
</div>
</ul>
<ul id="menu">
<li><a href="#Portrait" class="Portrait">Portrait</a></li>
<li><a href="#Veranstaltungen" class="Veranstaltungen">Veranstaltungen</a></li>
<li><a href="#Sport" class="Sport">Sport</a></li>
<li><a href="#Architektur" class="Architektur">Architektur</a></li>
<li><a href="#Serie" class="Serie">Jedi</a></li>
<li><a href="#Diverses" class="Diverses">Diverses</a></li>
</ul>
</div>
</body>