Thomas Dose: onmouseover in write-Methode einbetten

SELF-Forum

onmouseover in write-Methode einbetten

Thomas Dose
– Informationen zu den Bewertungsregeln

Hallo!

Ich möchte mit der "write"-Methode eine Tabelle mit weißem Hintergrund schreiben.
Wenn ich mit der Maus über eine Zelle, Zeile oder Spalte fahre, soll sich die Farbe ändern. Beim Verlassen soll der Hintergrund wieder weiß werden.
Dazu möchte ich die Ereignisse "onmouseover" bzw. "onmouseout" abfragen.
Wie kann ich das in die "write"-Methode einbetten?

Thomas

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. onmouseover in write-Methode einbetten, aber warum?

    Dark Sider
    – Informationen zu den Bewertungsregeln

    Hallo Thomas,

    Wie kann ich das in die "write"-Methode einbetten?

    Warum?

    MfG
    Dark Sider

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. onmouseover in write-Methode einbetten, aber warum?

      Thomas Dose
      – Informationen zu den Bewertungsregeln

      Das Ganze soll ein Lösungschema für Dreisatzaufgaben werden. Je nach Schwierigkeitsgrad er Aufgabe muss es unterschiedlich viele Spalten haben.
      Die Tabellenzellen sollen markiert werden und hinterher per Click ausgewählt werden, damit der Anwender lernt, welche Zahl in welche Zelle eingetragen werden muss.

      Thomas

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. onmouseover in write-Methode einbetten, aber warum?

        Dark Sider
        – Informationen zu den Bewertungsregeln

        Sprich; du willst mit Klick auf eine Tabellenzelle eine andere einblenden; wenn ich das richtig verstehe.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. onmouseover in write-Methode einbetten, aber warum?

          Thomas Dose
          – Informationen zu den Bewertungsregeln

          Sprich; du willst mit Klick auf eine Tabellenzelle eine andere einblenden; wenn ich das richtig verstehe.

          Nein!

          Je nach Fortschritt des Programms soll entweder eine Zeile, Spalte oder Zelle eingefärbt werden, also die bg-color geändert werden.

          Ich schon mehrere Varianten versucht, aber keine klappt so richtig:

          Variante 0:

          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          <html>
          <head>
              <title>Tabelle generieren</title>
              <script type='text/javascript'>

          <!--

          function Markieren(Zeile,Spalte)
              {
              alert("TEST1");
              /*
              document.getElementById("Zelle"+Zeile+Spalte).setAttribute('bgColor','#ffff00');
              */
              };

          function Normalisieren(Zeile,Spalte)
              {
              alert("TEST2");
              };

          function Aktivitaet(Zeile,Spalte)
              {
              alert("Zeile: " + Zeile + " Spalte: " + Spalte);
              };

          function LadenMZ() {

          document.write("<table border='1' cellpadding='5' cellspacing='0'>");

          document.write("<tr>");
              document.write("<td id = 'Zelle110' onmouseover = 'Markieren(1,10)' onmouseout = 'Normalisieren(1,10)' onclick = 'Aktivitaet(1,10)'><p id = 'Raster110'>Z110</p></td>");
              document.write("<td id = 'Zelle111' onmouseover = 'Markieren(1,11)' onmouseout = 'Normalisieren(1,11)' onclick = 'Aktivitaet(1,11)'><p id = 'Raster111'>Z111</p></td>");
              document.write("<td id = 'Zelle112' onmouseover = 'Markieren(1,12)' onmouseout = 'Normalisieren(1,12)' onclick = 'Aktivitaet(1,12)'><p id = 'Raster112'>Z112</p></td>");
              document.write("<td id = 'Zelle113' onmouseover = 'Markieren(1,13)' onmouseout = 'Normalisieren(1,13)' onclick = 'Aktivitaet(1,13)'><p id = 'Raster113'>Z113</p></td>");
              document.write("<td id = 'Zelle114' onmouseover = 'Markieren(1,14)' onmouseout = 'Normalisieren(1,14)' onclick = 'Aktivitaet(1,14)'><p id = 'Raster114'>Z114</p></td>");
              document.write("</tr>");

          document.write("<tr>");
              document.write("<td id = 'Zelle210' onmouseover = 'Markieren(2,10)' onmouseout = 'Normalisieren(2,10)' onclick = 'Aktivitaet(2,10)'><p id = 'Raster210'>Z210</p></td>");
              document.write("<td id = 'Zelle211' onmouseover = 'Markieren(2,11)' onmouseout = 'Normalisieren(2,11)' onclick = 'Aktivitaet(2,11)'><p id = 'Raster211'>Z211</p></td>");
              document.write("<td id = 'Zelle212' onmouseover = 'Markieren(2,12)' onmouseout = 'Normalisieren(2,12)' onclick = 'Aktivitaet(2,12)'><p id = 'Raster212'>Z212</p></td>");
              document.write("<td id = 'Zelle213' onmouseover = 'Markieren(2,13)' onmouseout = 'Normalisieren(2,13)' onclick = 'Aktivitaet(2,13)'><p id = 'Raster213'>Z213</p></td>");
              document.write("<td id = 'Zelle214' onmouseover = 'Markieren(2,14)' onmouseout = 'Normalisieren(2,14)' onclick = 'Aktivitaet(2,14)'><p id = 'Raster214'>Z214</p></td>");
              document.write("</tr>");

          document.write("<tr>");
              document.write("<td id = 'Zelle310' onmouseover = 'Markieren(3,10)' onmouseout = 'Normalisieren(3,10)' onclick = 'Aktivitaet(3,10)'><p id = 'Raster310'>Z310</p></td>");
              document.write("<td id = 'Zelle311' onmouseover = 'Markieren(3,11)' onmouseout = 'Normalisieren(3,11)' onclick = 'Aktivitaet(3,11)'><p id = 'Raster311'>Z311</p></td>");
              document.write("<td id = 'Zelle312' onmouseover = 'Markieren(3,12)' onmouseout = 'Normalisieren(3,12)' onclick = 'Aktivitaet(3,12)'><p id = 'Raster312'>Z312</p></td>");
              document.write("<td id = 'Zelle313' onmouseover = 'Markieren(3,13)' onmouseout = 'Normalisieren(3,13)' onclick = 'Aktivitaet(3,13)'><p id = 'Raster313'>Z313</p></td>");
              document.write("<td id = 'Zelle314' onmouseover = 'Markieren(3,14)' onmouseout = 'Normalisieren(3,14)' onclick = 'Aktivitaet(3,14)'><p id = 'Raster314'>Z314</p></td>");
              document.write("</tr>");

          document.write('</table>');

          document.close();

          var testtext = document.getElementById("Raster314").firstChild.nodeValue;
              alert(testtext);

          };

          function Markieren(Zeile,Spalte)
              {
              alert("TEST1");
              /*
              document.getElementById("Zelle"+Zeile+Spalte).setAttribute('bgColor','#ffff00');
              */
              };

          function Normalisieren(Zeile,Spalte)
              {
              alert("TEST2");
              };

          function Aktivitaet(Zeile,Spalte)
              {
              alert("Zeile: " + Zeile + " Spalte: " + Spalte);
              };

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

          <body style="background-color:#FFFFFF; padding:5px"
                onload="LadenMZ()">
          </body>
          </html>

          Variante 1:

          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          <html>
          <head>
              <title>Tabelle generieren</title>
              <script type='text/javascript'>

          <!--

          function Markieren()
              {
              alert("TEST1");
              /*
              document.getElementById("Zelle"+Zeile+Spalte).setAttribute('bgColor','#ffff00');
              */
              }

          function Normalisieren()
              {
              alert("TEST2");
              }

          function Aktivitaet()
              {
              alert("TEST3");
              /*
              alert("Zeile: " + Zeile + " Spalte: " + Spalte);
              */
              }

          function LadenMZ() {

          document.write('<table border="1" cellpadding="5" cellspacing="0">');

          document.write('<tr id = "Zeile1">');
              document.write('<td id = "Zelle110" width = 150><p id = "Raster110">Z110</p></td>');
              document.write('<td id = "Zelle111" width = 150><p id = "Raster111">Z111</p></td>');
              document.write('<td id = "Zelle112" width = 150><p id = "Raster112">Z112</p></td>');
              document.write('<td id = "Zelle113" width = 150><p id = "Raster113">Z113</p></td>');
              document.write('<td id = "Zelle114" width = 150><p id = "Raster114">Z114</p></td>');
              document.write('</tr>');

          document.write('<tr id = "Zeile2">');
              document.write('<td id = "Zelle210" width = 150><p id = "Raster210">Z210</p></td>');
              document.write('<td id = "Zelle211" width = 150><p id = "Raster211">Z211</p></td>');
              document.write('<td id = "Zelle212" width = 150><p id = "Raster212">Z212</p></td>');
              document.write('<td id = "Zelle213" width = 150><p id = "Raster213">Z213</p></td>');
              document.write('<td id = "Zelle214" width = 150><p id = "Raster214">Z214</p></td>');
              document.write('</tr>');

          document.write('<tr id = "Zeile3">');
              document.write('<td id = "Zelle310" width = 150><p id = "Raster310">Z310</p></td>');
              document.write('<td id = "Zelle311" width = 150><p id = "Raster311">Z311</p></td>');
              document.write('<td id = "Zelle312" width = 150><p id = "Raster312">Z312</p></td>');
              document.write('<td id = "Zelle313" width = 150><p id = "Raster313">Z313</p></td>');
              document.write('<td id = "Zelle314" width = 150><p id = "Raster314">Z314</p></td>');
              document.write('</tr>');

          document.write('</table>');

          document.close();

          var Zelle110 = document.getElementById("Zelle110");
              Zelle110.addEventListener("mouseover", Markieren, true);
              Zelle110.addEventListener("mouseout", Normalisieren, true);
              Zelle110.addEventListener("click", Aktivitaet, true);

          }

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

          <body style="background-color:#FFFFFF; padding:5px"
                onload="LadenMZ()">
          </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. onmouseover in write-Methode einbetten

    Frodo
    – Informationen zu den Bewertungsregeln

    Hallo!
    <script language="javascript">
    function wechsel(a)
    {
    document.getElementById('zelle1').style.backgroundColor=a;
    }
    document.write ("<table border='1' cellspacing='0'><tr><td id='zelle1' bgcolor='red' onmouseover='wechsel("blue")' onmouseout='wechsel("red")'> Hallo !! </td></tr></table>");
    </script>

    Sowas ??
    Kannst du noch entsprechend ausbauen ...
    Gruß Frodo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. onmouseover in write-Methode einbetten

      Thomas Dose
      – Informationen zu den Bewertungsregeln

      Erst mal vielen Dank!

      Ich habe deinen Vorschlag ergänzt. Leider macht das script aber nur eine rote Zelle, die sich beim Überfahren nicht ändert.

      Was nun?

      <html>
      <head>
          <title>Tabelle generieren (Fodo0)</title>
          <script type='text/javascript'>

      <!--
          function wechsel(a)
          {
          document.getElementById('zelle1').style.backgroundColor=a;
          }

      function LadenMZ()
          {
          document.write ("<table border='1' cellspacing='0'><tr><td id='zelle1' bgcolor='red' onmouseover='wechsel("blue")'      onmouseout='wechsel("red")'> Hallo !! </td></tr></table>");
          }

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

      <body style="background-color:#FFFFFF; padding:5px" onload="LadenMZ()">
      </body>
      </html>

      Mfg

      Thomas

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. onmouseover in write-Methode einbetten

      Thomas Dose
      – Informationen zu den Bewertungsregeln

      Jetzt funktioniert 's!

      <html>
      <head>
          <title>Tabellenzelle generieren</title>
          <script type='text/javascript'>

      <!--
          function wechsel(a)
          {
          document.getElementById('zelle1').style.backgroundColor=a;
          }

      function LadenMZ()
          {

      document.write ("<head><title>Tabellenzelle generieren</title></head>");

      document.write ("<script type='text/javascript'>"
          +"function wechsel(a){document.getElementById('zelle1').style.backgroundColor=a;}"
          +"</script>");

      document.write ("<body style="background-color:#FFFFFF">"
          +"<table border='1' cellpadding='5'>"
          +"<tr>"
          +"<td id='zelle1' bgcolor='red' onmouseover='wechsel("blue")' onmouseout='wechsel("red")'>"
          +"<p> Hallo !!</p>"
          +"</td>"
          +"</tr>"
          +"</table>"
          +"</body>");

      document.close();
          }

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

      <body style="background-color:#FFFFFF; padding:5px" onload="LadenMZ()">
      </body>

      Danke!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. onmouseover in write-Methode einbetten

    Frodo
    – Informationen zu den Bewertungsregeln

    Hallo Thomas,

    write("<tr>");

    write("<td name='zelle' class='zelle' bgcolor='#ffffff' onMouseover='this.style.background=blue' onMouseout='this.style.background=white'>Zelleninhalt</td>");

    write("</tr>");

    alternativ die CSS-Klasse der Zelle ansprechen bzw. ändern:

    Im Dateikopf:

    .formatierung1
    {
    background:blue;
    }

    .formatierung2
    {
    background:white;

    }

    write("<tr>");

    write("<td name='zelle' class='zelle' bgcolor='#ffffff' onMouseover='this.className=formatierung1' onMouseout='this.className=formatierung2'>Zelleninhalt</td>");

    write("</tr>");

    MFG Frodo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln