Button mit Pop-up Fenster

Dieses Thema im Forum "Web Page Design" wurde erstellt von salsagreen, 20.08.2004.

  1. salsagreen

    salsagreen Thread Starter MacUser Mitglied

    Beiträge:
    22
    Zustimmungen:
    0
    MacUser seit:
    25.01.2004
    Hallo,

    ich möchte ein Button erstellen für eine Navigation.
    Ich bekomme das nicht hin und frage, ob jemand ein einfaches Tutorial hat. Button mit Roll Over soll aussehen wie z.B. www.allianz.de dort mit der maus über "Das Unternehmen" gehen. Es folgt ein Pop-Up mit Untermenüs.

    Bitte um Hilfe!
    Danke
    salsagreen
     
  2. ente

    ente MacUser Mitglied

    Beiträge:
    243
    Zustimmungen:
    2
    MacUser seit:
    19.07.2004
    Ist mit Flash gemacht.

    auf Flashworker.de gibts eine menge dieser Tutorials.
     
  3. salsagreen

    salsagreen Thread Starter MacUser Mitglied

    Beiträge:
    22
    Zustimmungen:
    0
    MacUser seit:
    25.01.2004
    Sicher?

    Also, normalerweise kommt bei Flash - rechte Maustaste die Info - hier nicht.... geht das nicht anders. Ich meine ich habe auch kein Flash.....

    Danke
     
  4. mikne64

    mikne64 MacUser Mitglied

    Beiträge:
    3.097
    Zustimmungen:
    92
    MacUser seit:
    02.04.2004
    Hallo,

    es könnte auch eine Seite mit Javascript sein und der Funktion irgendwie OnMouse Rollover.

    Viele Grüße
    Michael
     
  5. j.proctor

    j.proctor MacUser Mitglied

    Beiträge:
    36
    Zustimmungen:
    0
    MacUser seit:
    01.06.2004
    das is kein flash, das is simples javascript.

    das prinzip:

    1. erstelle eine ("kategorie")-ebene, über die per mouse-over was passieren soll, positionier sie, stell bei mouseover den background/text zb auf ne andere farbe, zeige die aufzuklappende andere ebene und einiges anderes:

    PHP:
    <div class=kategorie  style='position:absolute; left:100; top:10; width:100; height:20; cursor:default;' onMouseOver="zeige('ebene01'); this.style.backgroundColor='#000000'; this.style.color='#ffffff'"  onMouseOut="verstecke('ebene01'); this.style.backgroundColor='#00ff00'; this.style.color='#000000'">
    Das Unternehmen
    </div>
    2. die aufzuklappende ebene namens "ebene01" ebenfalls als <div> erstellen und mittels css per default auf unsichtbar stellen:

    PHP:
    <div name=ebene01 id=ebene01 style='position:absolute; left:100; top:30px; width:100; border: 1px #000000 solid; visibility:hidden; cursor:default;'" onMouseOut="verstecke('ebene01');">
    <a href="
    ..">Hier der Link1</a><br>
    <a href="
    ..">Hier der Link2</a><br>
    <a href="
    ..">usw.</a>
    </div>
    und als 3. noch die verwendeten javascript-funktionen zeige() und verstecke(). hier eine variante, die zwischen verschiedenen browsern unterscheidet, da diese nötige javascript-befehle etwas unterschiedlich umsetzen und man das abfangen muss:

    PHP:
    <SCRIPT LANGUAGE="JavaScript">

    // hier schau ich, was für einen browser der user hat: 
    var ie  navigator.appName == "Microsoft Internet Explorer"
    var 
    op  navigator.userAgent.indexOf('Opera') != -1
    var 
    ns6 navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) > "4"
    var 
    ns4 navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) == "4"
    var 
    mac window.navigator.platform == "MacPPC" && navigator.appVersion.substring(0,1) == "4";  

    // mit dieser funktion kann ich ein bestimmtest element anzeigen 
    function zeige(element) {     
      
    // falls internet explorer, mit DIESEM befehl anzeigen     
      
    if (ie) {         
        
    document.all[element].style.visibility="visible";     
      }      
      
    // falls netscape oder opera, mit DIESEM befehl anzeigen,         
      
    if (ns6 || op) {         
        
    document.getElementById(element).style.visibility="visible";     
      }      
      
    //falls netscape 4.x .. geht nix! (weil netscape 4.x sowas gar nicht kann) 
    }  

    // mit dieser funktion kann ich ein bestimmtest element VERSTECKEN 
    function verstecke(element) { 
      
    // falls internet explorer, mit DIESEM befehl anzeigen     
      
    if (ie) {         
        
    document.all[element].style.visibility="hidden";     
      }      
      
    // falls netscape oder opera, mit DIESEM befehl anzeigen,         
      
    if (ns6 || op) {         
        
    document.getElementById(element).style.visibility="hidden";     
      }      
      
    //falls netscape 4.x .. geht nix! (weil netscape 4.x sowas gar nicht kann) 

    </SCRIPT>
     
  6. salsagreen

    salsagreen Thread Starter MacUser Mitglied

    Beiträge:
    22
    Zustimmungen:
    0
    MacUser seit:
    25.01.2004
    Vielen Dank!

    ist doch umfangreicher wie ich dachte ;-((
    PHP/ Java Script/ etc.......

    Puhhh - wo trage ich denn das ein? Auf der html Seite? Kann ich dafür
    GoLive oder Dreamweaver verwenden oder ist das ein Zusatz-Text-File?

    Sorry, aber ich will das wirklich mal ausprobieren!

    Danke
    salsagreen
     
  7. j.proctor

    j.proctor MacUser Mitglied

    Beiträge:
    36
    Zustimmungen:
    0
    MacUser seit:
    01.06.2004
    nein, mit php hat das nichts zu tun! ich hab das nur hier als "php-code" dargestellt, weils so schönes syntax-highlighting gibt.

    erstell ein grundgerüst einer html-datei und kopier die obigen sdachen dann alle 3 irgendwohin in den <body> .. </body> bereich. sollte eigentlich funktionieren, ausser ich hab mich irgendwo etwas vertippt
     
  8. j.proctor

    j.proctor MacUser Mitglied

    Beiträge:
    36
    Zustimmungen:
    0
    MacUser seit:
    01.06.2004
    ein kleiner fehler war noch drin, hab dir das ganze mal als komplette html-datei erstellt. das is eben auf simpelste weise realisiert, ginge bestimmt noch anders, effektiver oder wie auch immer ;)

    bitteschön:
     
  9. salsagreen

    salsagreen Thread Starter MacUser Mitglied

    Beiträge:
    22
    Zustimmungen:
    0
    MacUser seit:
    25.01.2004
    Super!

    Das hilf mir schon sehr viel weiter - ich werde mich mal an die Grafiken ranmachen!

    Merci
    salsagreen
     
Die Seite wird geladen...

Diese Seite empfehlen