iasonas: div bei onmouseover einblenden u. b. onclick eingeblendet lassen

wie geht das?

soweit bin ich:

im head steht:

<script language="javascript">
function show(id) {
document.getElementById(id).style.display = 'block';
    }
function hide(id) {
document.getElementById(id).style.display = 'none';
    }
</script>

der link:

<a href="#" onMouseOver="show('layer1'); window.status=''; return true" onMouseOut="hide('layer1'); window.status='';return true">Layer1</a>

und der dazugehörige layer:

<div id="layer1" onMouseOver="show('layer1'); window.status=''; return true" onMouseOut="hide('layer1'); window.status='';return true" style="position:absolute; display:none;">
LAYER EINS
</div>

mit onclick hatte ich rumexperimentiert, kam aber zu keinem ergebnis. deshalb stehts auch nicht im code oben drin.
kannst du mir helfen? danke.

  1. Hallo iasonas.

    <script language="javascript">
    function show(id) {
    document.getElementById(id).style.display = 'block';
        }
    function hide(id) {
    document.getElementById(id).style.display = 'none';
        }
    </script>

    Du solltest dein Script in eine externe Datei schreiben und dann per Link im <head> deiner Seite einbinden.

    Darüber hinaus kannst du dir das language-attribute sparen. <script> wird standardmäßig als JavaScript interpretiert, aber du kannst auch type="application/x-javascript" reinschreiben, wenn du dadurch besser schläfst.

    der link:

    <a href="#" onMouseOver="show('layer1'); window.status=''; return true" onMouseOut="hide('layer1'); window.status='';return true">Layer1</a>

    und der dazugehörige layer:

    <div id="layer1" onMouseOver="show('layer1'); window.status=''; return true" onMouseOut="hide('layer1'); window.status='';return true" style="position:absolute; display:none;">
    LAYER EINS
    </div>

    Auch deine Eventhandler solltest du nicht inline notieren, sondern im eingebundenen script in Form von bspw. element.addEventListener( 'click', function );

    Gib deinem Link eine ID, lass dem div seine ID, schmeiß den Rest aus deinen HTML-Tags raus und dann schreib in JS:

    var link1 = document.getElementById( 'link1' );  
      
    var layer1 = document.getElementById( 'layer1');  
      
    link1.addEventListener( 'click', function ( ) {  
      
      if ( layer1.style.display === 'block' ) {  
      
        layer1.style.display = 'none';  
      
      }  
      
      else {  
      
        layer1.style.display = 'block';  
      
      }  
      
    });
    

    Oder sowas in der Art. ;)

    Kannst aber auch statt einer anonymen Funktion einfach schreiben:

    link1.addEventListener( 'click', link1OnClick );  
      
    function link1OnClick ( ) {  
      
    /* ... */  
      
    }
    

    Je nach dem, was du mit dem DIV Element bezweckst, solltest du auch schauen, ob dafür nicht ein anderes HTML Element besser passt.

    Hoffentlich hilfts etwas.

    Gruß.

    var

    formerly known as Roadster

    1. Hey.

      Sorry,

      Korrektur:

      Du solltest dein Script in eine externe Datei schreiben und dann per Link im <head> deiner Seite einbinden.

      Das Stylesheet bindest du im <head> ein, das Script am _Ende_ des <body>, damit das Laden der Seite nicht verzögert wird.

      Gruß.

      var

      formerly known as Roadster

  2. Hi.

    ...und wenn ich deine Frage richtig gelesen hätte, hätte ich auch nicht so einen Murks geschrieben! ;)

    Wenn du willst, dass das Element bei 'mouseover' eingblendet, bei 'mouseout' ausgeblendet und bei 'click' behalten wird, musst du nach dem Prinzip wie ich's dir beschrieben habe drei EventListener an dein link-Element anhängen.

    Da dein "layer1" aber dann aber aufgrund "mouseout" trotz "click" wieder auf display = none; gesetzt würde, bietet sich hier die seltene Gelegenheit, die removeEventListener-Methode sinnvoll zu nutzen.

    Schreib in deine click-Funktion:

    link1.removeEventListener( 'mouseout', hideLayer1 );

    ...oder wie du die entsprechende Funktion dann auch immer genannt hast.

    Sorry für den Dreifachpost. Bin etwas zerstreut. Aber ich hoffe das Prinzip ist klar geworden und dass es dir weiterhilft...

    Gruß.

    var

    formerly known as Roadster

    1. Hallo,

      Bin etwas zerstreut.

      formerly known as Roadster

      offensichtlich

      Gruß
      Kalk

      1. Hallo,

        Hallo

        Bin etwas zerstreut.

        formerly known as Roadster

        offensichtlich

        Deinem Zitat entnehme ich eine dezente Anspielung auf den Wechsel meines Nicknames?

        Ich versuche nur die für dieses Forum empfohlenen Verhaltensrichtlinien nicht zu missachten!

        Nach gefühlten 1 Mio Posts in den letzten Monaten, dachte ich es wäre angemessen, zumindest für kurze Zeit darauf hinzuweisen, dass Roadster und var identisch sind.

        Dass ich überhaupt auf Roadster kam, lag nur daran, dass mir bei meinem ersten Post damals spontan nichts einfiel und gerade zufällig eine Autozeitschrift in sichtweite lag. ;)

        Davon abgesehen, wird es dir aber sicher ein Leichtes sein, bessere Gründe für meine Zerstreutheit zu finden...

        ;)

        Gruß.

        var (!)

        1. Hi,

          Bin etwas zerstreut.
          formerly known as Roadster
          offensichtlich

          Deinem Zitat entnehme ich eine dezente Anspielung auf den Wechsel meines Nicknames?

          irgendwie schon - vielleicht so, als wüsstest du selbst nicht mehr, wer du bist. ;-)

          Ich versuche nur die für dieses Forum empfohlenen Verhaltensrichtlinien nicht zu missachten!

          Das ist löblich, aber ...

          Dass ich überhaupt auf Roadster kam, lag nur daran, dass mir bei meinem ersten Post damals spontan nichts einfiel und gerade zufällig eine Autozeitschrift in sichtweite lag. ;)

          ... der war doch okay, warum überhaupt wechseln?

          Ciao,
           Martin

          --
          Das Gehirn ist schon eine tolle Sache: Es fängt ganz von allein an zu arbeiten, wenn man morgens aufsteht, und hört erst damit auf, wenn man in der Schule ankommt.
            (alte Schülererkenntnis)
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. Hi,

            Hi Martin

            irgendwie schon - vielleicht so, als wüsstest du selbst nicht mehr, wer du bist. ;-)

            Unter dissoziativer Identitätsstörung leide ich glücklicherweise (noch) nicht. Ein paar leicht zu beherrschende Zwangsstörungen und ein leichter Hang zur Melancholie sind (so weit ich weiß) meine einzigen Probleme in dieser Hinsicht.

            Dass ich überhaupt auf Roadster kam, lag nur daran, dass mir bei meinem ersten Post damals spontan nichts einfiel und gerade zufällig eine Autozeitschrift in sichtweite lag. ;)

            ... der war doch okay, warum überhaupt wechseln?

            Ich habe nicht mal einen Führerschein! :D

            Naaa, ich fand den nick immer schon total unpassend und irgendwie prollig. :)

            var als Abkürzung für variable klingt zwar (für dieses Forum) sicher abgedroschen, trifft aber seinem Gehalt nach den Kern meiner Persönlichkeit ziemlich gut, - was im Übrigen sowohl meine positiven als auch meine negativen Charakteristika umschließt, zumal variabel aus dem Lateinischen übersetzt soviel wie 'wechselhaft', aber auch 'veränderbar' bedeutet. ;)

            Gruß.

            var

            1. Hi variabler roadster :-)

              var als Abkürzung für variable klingt zwar (für dieses Forum) sicher abgedroschen, trifft aber seinem Gehalt nach den Kern meiner Persönlichkeit ziemlich gut, - was im Übrigen sowohl meine positiven als auch meine negativen Charakteristika umschließt, zumal variabel aus dem Lateinischen übersetzt soviel wie 'wechselhaft', aber auch 'veränderbar' bedeutet. ;)

              warum benutzt du nicht deinen Vornamen?

              Da ich kein Gamer bin und mit Fantasy Namen nicht so viel anfangen kann, find ich es persönlich immer angenehmer, jemanden mit Namen anzusprechen :-)

              Viele Grüße aus LA

              --
              ralphi
              1. Hi variabler roadster :-)

                hi goldenstate Ralphi ;)

                warum benutzt du nicht deinen Vornamen?

                Mein Vornahme ist identisch mit dem des ersten und des zweiten Vorsitzenden des SELFHTML e.V.

                Den zu benutzen käme einer Autoritätsanmaßung gleich, die mir nicht zusteht. :)

                Da ich kein Gamer bin und mit Fantasy Namen nicht so viel anfangen kann, find ich es persönlich immer angenehmer, jemanden mit Namen anzusprechen :-)

                Ich finde gerade die Möglichkeit sich einen eigenen Rufnahmen zuzulegen ziemlich interessant!

                ...und mit "Fantasy" im verkitschten Disneysinne habe ich nichts am Hut (höchstens im Jules Verne-haften Sinne ;)  ...und da Duke Nukem mittlerweile vom Polizistenmörder zum Vorzeigepatrioten mutiert ist und ich ohnehin kaum noch Zeit habe, isses mit dem "Gamen" auch nicht mehr weit her.

                Gruß.

                var  ;)

  3. @@iasonas:

    nuqneH

    function show(id) {
    document.getElementById(id).style.display = 'block';
        }

    Es ist unsinnig, der Funktion die ID als Parameter zu übergeben und sie bei jedem Aufruf das Element neu im DOM zuchen zu lassen.

    Besser die Elemente einamlig im DOM suchen und in Variablen speichern. Die Funktion bekommt als Parameter die Referenz auf das Element:

    var fooElement = document.getElementById('foo');  
      
    function show(element)  
    {  
       element.style.display = 'block';  
    }  
      
    // Aufruf mit:  
    show(fooElement);
    

    Oder gar nicht die CSS-Eigenschaft display mit JavaScript ändern, sondern das hidden-Attribut setzen/entfernen.

    der link:

    <a href="#" onMouseOver="show('layer1'); window.status=''; return true" onMouseOut="hide('layer1'); window.status='';return true">Layer1</a>

    Das ist ein Link zum Seitenanfang. Wohl kaum das Gewünschte. Wenn damit kein Link zum Seitenanfang gemeint ist, ist <a href="#"> im HTML falsch; es sollte kein Link, sondern ein Button sein.

    window.status=''? Wirklich? Welche Browser gestatten noch, per JavaScript die Statuszeile zu ändern?

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  4. div bei onmouseover einblenden u. b. onclick eingeblendet lassen

    wie geht das?

    onMouseOver und onMouseOut funktionieren wie gewünscht?

    mit onclick hatte ich rumexperimentiert, kam aber zu keinem ergebnis.

    Logisch, du kannst die Box, die durch onMouseOver schon sichtbar ist, durch onclick nicht "noch sichtbarer" machen. Und beim Wegziehen der Maus geht die Box wieder aus.

    Dann brauchst du einen "Merker", den du bei onclick setzt. Die Funktion, die per onMouseOut aufgerufen wird, fragt diesen Merker ab.

      
    <p onclick="toggle(1)" onMouseOver="toggle(2)" onMouseOut="toggle(3)" >Layer ein- / ausschalten</p>  
    <div id="layer1" style="position:absolute; display:none;">...</div>  
    
    
      
    // layer1 muss an dieser Stelle bekannt sein  
    var layer1 = document.getElementById( "layer1" );  
    var sperre = 0;  
    function toggle( art ) {  
      if ( art == 1 ) { // dauerhaft einschalten, nie wieder ausschalten  
        layer1.style.display = "block";  
        sperre = 1;  
      } else if ( art == 2 ) { // temporär einschalten  
        layer1.style.display = "block";  
      } else if ( art == 3 ) { // temporär ausschalten  
        if ( sperre != 1 ) layer1.style.display = "none";  
      }  
    }  
    
    

    So das Prinzip, nicht getestet.

    Linuchs

    1. die erste der beiden Zeilen

      layer1.style.display = "block";

      ist sogar entbehrlich, denn die Box ist ja schon "block" durch onMouseOver. Bei Klick muss nur noch die Sperre gesetzt werden.

      Linuchs

      1. oha. was für eine resonanz. DANKE an euch DAFÜR!
        ob ich das alles jetzt verstehe, weiss ich noch nicht. :-)
        bin kein programmierer.
        muss mal alle beiträge lesen...
        aber vorab noch einmal: danke!