✔ On-Mouseover Menü mit zusätzlichem Teaser Bild daneben

D

dennisdb

Grünschnabel
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)

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>
 
Hallo,
vielleicht hilft dir das weiter:
HTML: 
<div id="displayed"><IMG name=gross alt=Vorschaubild src="images/image-2.jpg"></div>
<div id="menue">
<a onfocus=this.blur(); onmouseover='document.gross.src="images/image-2.jpg";'><IMG alt=Vorschaubild align=middle src="images/thumb-2.jpg"></a>
<a onfocus=this.blur(); onmouseover='document.gross.src="images/image-4.jpg";'><IMG alt=Vorschaubild align=middle src="images/thumb-4.jpg"></a>
<a onfocus=this.blur(); onmouseover='document.gross.src="images/image-3.jpg";'><IMG alt=Vorschaubild align=middle src="images/thumb-3.jpg"></a> <br>
* zum Vergrößern Bild bitte anklicken
 </div>
im div displayed definiertst du die genaue Position deines Bildes und legst das erste Bild beim betreten der Seite fest.
die "thumb-..." ersetzt du durch <a href....>


Gruß tinchern
 
Cool. Vielen lieben dank. Jetzt klappt zum Glück alles und nochmals danke für die schnelle Antwort. Ich habe noch eine Lightbox dazu gemacht. Das ganze sieht jetzt so aus:

HTML: 
<div id="teaser_box"><img src="teaser_bilder/jette.jpg" width="152" height="152" name="teaser" alt="Jette-Marie"></div>

    

	<ul id="menu">
		
        <li>
        <a href="lightbox/images/portrait01.jpg" rel="lightbox[portrait]" title="Hallo Welt" onMouseOver='document.teaser.src="teaser_bilder/teaser_portrait.jpg";' class="Portrait">Portrait</a></li>
       
        <a href="lightbox/images/portrait02.jpg" rel="lightbox[portrait]" title="Hallo Welt"></a>
        <a href="lightbox/images/portrait03.jpg" rel="lightbox[portrait]" title="Hallo Welt"></a>

        
        <li><a href="lightbox/images/veranstaltungen01.jpg" rel="lightbox[veranstaltungen]" title="Hallo Welt" onMouseOver='document.teaser.src="teaser_bilder/teaser_veranstaltungen.jpg";' class="Veranstaltungen">Veranstaltungen</a></li>     
        
        <a href="lightbox/images/veranstaltungen02.jpg" rel="lightbox[veranstaltungen]" title="Hallo Welt"></a>
        <a href="lightbox/images/veranstaltungen03.jpg" rel="lightbox[veranstaltungen]" title="Hallo Welt"></a>
        
        <li><a href="lightbox/images/sport01.jpg" rel="lightbox[sport]" title="Hallo Welt" onMouseOver='document.teaser.src="teaser_bilder/teaser_sport.jpg";' class="Sport">Sport</a></li>
    	
        <a href="lightbox/images/sport02.jpg" rel="lightbox[sport]" title="Hallo Welt"></a>
        <a href="lightbox/images/sport03.jpg" rel="lightbox[sport]" title="Hallo Welt"></a>
</ul>
 
Gern geschehen! Lightbox ist cool, so einfach zu integrieren und super Effekt. Wird bestimmt eine tolle Seite. Viel Erfolg beim stylen...

Gruß tinchern

PS: Setz das Thema mal auf erledigt. Freuen sich die anderen das es eine Lösung gab. Bin wie du hier ein "Grünschnabel" und freue mich immer auf Hilfe und Anregungen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück