[JavaScript] Ausklappmenü von Nintendo

Dieses Thema im Forum "Webentwicklung" wurde erstellt von L33do, 1. Januar 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 1. Januar 2007
    Ausklappmenü von Nintendo

    Bin auf der Suche nach einem Ausklappmenü. Gut, hab meines schon gefunden, nämlich wäre das von Nintendo.com ideal:

    Country Selector at Nintendo -> Ausklappmenü bei "Fun Vault"

    Nur bring ich es einfach nicht zusammen, dass ich es aus dem Quelltext lesen kann ... wäre super, wenn mir da jemand helfen könnte!

    Bewertung ist natürlich drinnen!
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #2 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Sers!

    der code is derhier:

    Code:
     <li><a href="#"><img src="/img/text/topnav_fun25_off.png" width="92" height="33" alt="FUN VAULT" onmouseover="showMenuLayer('subNavFunVault',this,'header');" onmouseout="delayHide('subNavFunVault');" onclick="return false;" /></a></li> 
    
    a href="#" heißt soviel wie, er soll bei einem klick darauf nix öffnen! ;)
    img src="funblblblba.png" ist das Fun Vault bild.
    width und height is klar
    jetzt kommts dann:
    onmouseover: is jvscript und sag sobald du die maus darüber tust soll er das LayerMEnu subNavFunVault',this,'header direkt darüber anzeigen.
    und onmouseout: er soll es verschwienden lassen, beim verlassen mit der mouse.

    die show menu layer und delay hide sind function in Javascript.
    Die sind in der datei: http://www.nintendo.com/js/nav.js

    und dann darunter ist:

    Code:
    <div id="subNavFunVault" class="flyoutMenu" onmouseout="delayHide(this);" onmouseover="keepUp(currentflyout);">
     <ul>
     <li><a href="http://www.nintendo.com/downloads" onmouseover="rolloverOn('funvault_downloads25');" onmouseout="rolloverOff('funvault_downloads25');"><img name="funvault_downloads25" src="/img/text/funvault_downloads25_off.png" width="89" height="16" alt="Downloads" border="0" /></a></li>
    
     <li><a href="http://www.nintendo.com/arcade" onmouseover="rolloverOn('funvault_arcade25');" onmouseout="rolloverOff('funvault_arcade25');"><img name="funvault_arcade25" src="/img/text/funvault_arcade25_off.png" width="89" height="16" alt="Arcade" border="0" /></a></li>
     <li class="last"><a href="http://www.nintendo.com/theater" onmouseover="rolloverOn('funvault_theater25');"
    onmouseout="rolloverOff('funvault_theater25');"><img name="funvault_theater25" src="/img/text/funvault_theater25_off.png" width="89" height="16" alt="Theater" border="0" /></a></li>
     </ul>
    </div>
    
    Wobei das einfach nur der Láyer wird und ist folgendes hat:
    Code:
    #subNavFunVault {
     display: none;
     position: absolute;
     width: 91px; height: 54px;
     background-color: #555;
     padding: 0px; margin: 0px;
     z-index: 1;}
    
    So, das wars! =)
    Hoff ich zumindest!^^

    gruß

    gl
     
  4. #3 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Ne, funktioniert leider nicht. Ich glaube, es fehlt noch der "class-tag" ...
     
  5. #4 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Sers!

    Ok, es hat noch mehr gefehlt!^^

    Code:
     <script src="/js/rollover.js" type="text/javascript" language="javascript">
     <!--
     function rolloverInit() {}
     function rolloverOn() {}
     function rolloverOff() {}
     //-->
     </script>
    
    und die rollover.js:

    Code:
    // Rollover v1.0
    // http://www.dithered.com/javascript/rollover/index.html
    // code by Chris Nott (chris@NOSPAMdithered.com - remove NOSPAM)
    
    var rolloverImageOff = new Array();
    var rolloverImageOn = new Array();
    var rolloverCurrent = '';
    var rolloverInitialized = false;
    var rolloverNeeded = true;
    
    // Preload rollover images
    function rolloverInit() {
     if(!rolloverInitialized){
     if (document.images) {
     
     // for each rollover, preload both states and put filename in an associative array
     for (var i = 0; i < rolloverImageOnFiles.length; i++) {
     rolloverCurrentName = rolloverImageTagNames[i];
     
     rolloverImageOff[rolloverCurrentName] = new Image();
     rolloverImageOn[rolloverCurrentName] = new Image();
     rolloverImageOff[rolloverCurrentName].src = rolloverImageDirectory + rolloverImageOffFiles[i];
     rolloverImageOn[rolloverCurrentName].src = rolloverImageDirectory + rolloverImageOnFiles[i];
     }
     rolloverInitialized = true;
     }
     }//end if rolloverInitialized
    }
    
    
    // On state activation
    function rolloverOn(img, layer) {
     if (document.images && rolloverImageOn[img]) {
     // rollovers in layers in NS4 require a different image reference
     if (layer != null && document.layers) {
     if (typeof(layer) == 'object') layer.document.images[img].src = rolloverImageOn[img].src;
     else if (typeof(layer) == 'string') eval('document.layers["' + layer + '"].document.images[img].src = rolloverImageOn[img].src');
     }
    
     // non-layer rollovers in NS4 and all rollovers in other browsers
     else if (document.images[img]){
     document.images[img].src = rolloverImageOn[img].src;
     }
     }
    }
    
    
    // Off state activation
    function rolloverOff(img, layer) {
     if (document.images && rolloverImageOff[img]) {
    
     // rollovers in layers in NS4 require a different image reference
     if (layer != null && document.layers) {
     if (typeof(layer) == 'object') layer.document.images[img].src = rolloverImageOff[img].src;
     else if (typeof(layer) == 'string') eval('document.layers["' + layer + '"].document.images[img].src = rolloverImageOff[img].src');
     }
    
     // non-layer rollovers in NS4 and all rollovers in other browsers
     else if (document.images[img]) document.images[img].src = rolloverImageOff[img].src;
     }
    }
    
    
    function rolloverInputOn(btn, img) {
     btn.src = rolloverImageOn[img].src;
    }
    
    function rolloverInputOff(btn, img) {
     btn.src = rolloverImageOff[img].src;
    }
    
    // Rollover with state function (not used in standard rollovers; included for flexability)
    function rolloverSetCurrent(img) {
     if (rolloverCurrent) rolloverOff(rolloverCurrent);
     rolloverCurrent = img;
     rolloverOn(rolloverCurrent);
    }
    
    // function for page specific rollovers
    function preloadRollover(onFile, offFile, tagName) {
     var index = rolloverImageOffFiles.length;
     rolloverImageOnFiles[index] = onFile;
     rolloverImageOffFiles[index] = offFile;
     rolloverImageTagNames[index] = tagName;
    }
    
    und in <body> tag: <body onload="rolloverInit();">

    Hm, der class-tag is ja nur wieder css.
    hab den aber auch nirgends gefunden! xD

    du musst dann noch schaun, dass bei dem subnavvault div der name vom bild (name="xyz") gleich dem rollover ist. (bei onmouseover bzw. onmouseoff).

    gruß

    gl
     
  6. #5 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Hm, das geht auch irgendwie sicher kürzer, ich schau mal nach einem anderen um, bewertung hast du aber, danke trotzdem ;)
     
  7. #6 1. Januar 2007
  8. #7 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    eigentlich reicht da n einfaches onmouseover -> div.innerHtml = "meine links" onmouseout -> div.innerHtml = "n bild".
     

  9. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript Ausklappmenü Nintendo
  1. Antworten:
    0
    Aufrufe:
    3.681
  2. Antworten:
    6
    Aufrufe:
    2.946
  3. Antworten:
    2
    Aufrufe:
    1.093
  4. JavaScript Cookie Manager

    leex , 4. September 2015 , im Forum: Webentwicklung
    Antworten:
    2
    Aufrufe:
    1.226
  5. Antworten:
    9
    Aufrufe:
    1.385
  • Annonce

  • Annonce