tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
436
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 16.09.11 17:37 #1
    dennisdb dennisdb ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    3
    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-Code:
    <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>
     
    Zitieren Zitieren
  2. 16.09.11 20:41 #2
    tinchern06 tinchern06 ist offline Mitglied
    Registriert seit
    Sep 2011
    Beiträge
    17
    Hallo,
    vielleicht hilft dir das weiter:
    HTML-Code:
    <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
     
    Zitieren Zitieren
  3. 17.09.11 15:51 #3
    dennisdb dennisdb ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    3
    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-Code:
    <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>
     
    Zitieren Zitieren
  4. 17.09.11 23:12 #4
    tinchern06 tinchern06 ist offline Mitglied
    Registriert seit
    Sep 2011
    Beiträge
    17
    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.
     
    Zitieren Zitieren
  5. 18.09.11 12:26 #5
    dennisdb dennisdb ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    3
    Super,
    danke für den Tipp
     
    Zitieren Zitieren
« DIV Container in HTML Tabellen Zelle - Overflow Problem | Text neben Bild fließen aber mit div-container/HTML-Code in CSS umwandeln »

Ähnliche Themen

  1. Menü, mouseover, bild austausch von anderen anderen Zeile
    Von xMiNe im Forum Javascript & Ajax
    Antworten: 11
    Letzter Beitrag: 17.01.09, 00:11
  2. Menü, mouseover, bild austausch von anderen anderen Zeile
    Von xMiNe im Forum HTML & XHTML
    Antworten: 0
    Letzter Beitrag: 16.01.09, 23:22
  3. Menü:Mouseover - neues Bild soll erscheinen...
    Von LokiPoki im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 23.06.05, 15:10
  4. Ausklappbares Menü wenn man mouseover über Bild
    Von Scorpio im Forum Javascript & Ajax
    Antworten: 12
    Letzter Beitrag: 12.09.04, 11:27
  5. Menü Bild wechsel bei mouseover
    Von Daensch im Forum PHP
    Antworten: 4
    Letzter Beitrag: 16.02.04, 07:09

Stichworte