Jana: mit JavaScript den Inhalt in einem DIV austauschen

Ich habe mehrere Links auf einer Seite liegen. Wenn man über einen Link fährt, dann soll ein Text in einem DIV erscheinen. Wenn man über den nächsten Link fährt dann soll neuer Text in dem gleichen DIV erscheinen. Wie könnte man das mit JavaScript erstellen?

  1. Hi Jana,

    nach den DOM-Regeln (ab IE5, NS6, aber leider noch nicht Opera!) z.B. so:

    ...
    var link_html = '<a ... >blabla</a>';
    ...
    document.getElementById("links").innerHTML = link_html;
    ...

    <div id="links">
    </div>

    Gruß,
    Danny

    1. Hi Danny,

      nach den DOM-Regeln

      innerHTML gibt's im DOM nicht.

      http://selfhtml.teamone.de/dhtml/modelle/microsoft.htm
       http://selfhtml.teamone.de/javascript/objekte/all.htm#inner_html

      (ab IE5, NS6, aber leider noch nicht Opera!)

      Opera wird es ab Version 7 trotzdem beherrschen.

      LG Orlando

      1. Stimmt, wer lesen kann ist klar im Vorteil... *schäm*

        Aber warum machen es dann fast alle mit innerHTML?

        Schön, daß wenigstens Du so gut und aktuell informiert bist.

        Klasse, das Opera es ab V7 endlich kann! *freu*

        Gruß zurück,
        Danny

        1. Hi Danny,

          Aber warum machen es dann fast alle mit innerHTML?

          weil M$ es so durchgesetzt hat.

          Klasse, das Opera es ab V7 endlich kann! *freu*

          Naja, ist halt ein zweischneidiges Schwert. Es wird zwar einfacher, etwas zu programmieren, aber ob's der Verbreitung des DOM an sich nützlich ist, steht auf einem anderen Blatt. Augenscheinlich können es sich die Norweger nicht leisten, es *nicht* zu unterstützen, nachdem sogar Mozilla mitmacht...

          LG Orlando

          1. Hallo Orlando,

            Aber warum machen es dann fast alle mit innerHTML?

            weil M$ es so durchgesetzt hat.

            Ich bin hier im Forum ja nicht unbedingt als Freund von Microsoft bekannt. Aber innerHTML ist doch etwas sehr praktisches. Denn wenn es um mehr als einzelnen Text geht, müsstest Du mit createElement & Co arbeiten. Und stell Dir das mal vor, Du willst eine Tabelle (z.B. für einen Kalender) in ein <div> reinschreiben.

            Naja, ist halt ein zweischneidiges Schwert. Es wird zwar einfacher, etwas zu programmieren, aber ob's der Verbreitung des DOM an sich nützlich ist, steht auf einem anderen Blatt. Augenscheinlich können es sich die Norweger nicht leisten, es *nicht* zu unterstützen, nachdem sogar Mozilla mitmacht...

            Wieso sollte es der Verbreitung von DOM nicht dienen? Ach Mist, Opera unterstützt ja leider auch document.all. :-(

            Grüße,

            Christian

    2. Hi Danny,
      könntest du mir evt. den Quellcode näher definieren? Das wäre super!

      Gruß,
      Jana

      Hi Jana,

      nach den DOM-Regeln (ab IE5, NS6, aber leider noch nicht Opera!) z.B. so:

      ...
      var link_html = '<a ... >blabla</a>';
      ...
      document.getElementById("links").innerHTML = link_html;
      ...

      <div id="links">
      </div>

      Gruß,
      Danny

  2. Auch dir einen schönen Vormittag,

    Ich habe mehrere Links auf einer Seite liegen. Wenn man über einen Link fährt, dann soll ein Text in einem DIV erscheinen. Wenn man über den nächsten Link fährt dann soll neuer Text in dem gleichen DIV erscheinen. Wie könnte man das mit JavaScript erstellen?

    wenn das DIV die ID "info" hat:

    function info(x) {
     if (document.getElementById) {
      document.getElementById("info").firstChild.nodeValue = x;
     }
    }

    <a href="link.htm" onmouseover="info('bla bla');">Link</a>

    Natürlich solltest du den Inhalt beim MouseOut-Event wieder zurücksetzen.

    http://selfhtml.teamone.de/javascript/objekte/node.htm#node_value

    Die elegantere Methode ist, ein vorhandenes title-Attribut auszulesen und dessen Inhalt im DIV darzustellen, dazu benötigst du Event-Listener:

    http://www.xs4all.nl/~ppk/js/events_advanced.html

    LG Orlando

    1. Danke Orlando,
      ich habe ein Beispiel versucht:

      <html>
      <head>
      <title>Unbenanntes Dokument</title>
      <script language="JavaScript" type="text/JavaScript">
      <!--
      function info(x) {
       if (document.getElementById) {
        document.getElementById("info").firstChild.nodeValue = x;
       }
      }

      //-->
      </script>
      </head>

      <body>
      <div id="info" style="position:absolute; left:76px; top:15px; width:229px; height:156px; z-index:1"></div>
      <a href="#" onMouseOver="info('bla bla');">Link</a>
      </body>
      </html>

      aber es geht nicht. Weißt du wo der Fehler ist?

      Auch dir einen schönen Vormittag,

      Ich habe mehrere Links auf einer Seite liegen. Wenn man über einen Link fährt, dann soll ein Text in einem DIV erscheinen. Wenn man über den nächsten Link fährt dann soll neuer Text in dem gleichen DIV erscheinen. Wie könnte man das mit JavaScript erstellen?

      wenn das DIV die ID "info" hat:

      function info(x) {
      if (document.getElementById) {
        document.getElementById("info").firstChild.nodeValue = x;
      }
      }

      <a href="link.htm" onmouseover="info('bla bla');">Link</a>

      Natürlich solltest du den Inhalt beim MouseOut-Event wieder zurücksetzen.

      http://selfhtml.teamone.de/javascript/objekte/node.htm#node_value

      Die elegantere Methode ist, ein vorhandenes title-Attribut auszulesen und dessen Inhalt im DIV darzustellen, dazu benötigst du Event-Listener:

      http://www.xs4all.nl/~ppk/js/events_advanced.html

      LG Orlando

      1. Hi Jana,

        ich habe ein Beispiel versucht
        aber es geht nicht. Weißt du wo der Fehler ist?

        das DIV darf nicht leer sein, mit

        <div id="info" style=" ... "> </div>
                                     ^^^^^^
        funktioniert es.

        LG Orlando

        1. Super, es funktioniert!
          Vielen Dank und schönes Wochenende

          Gruß
          Jana