Andreas Korthaus: onmouseout verhindern ohne neu zu laden

Hallo!

ich habe eine Tabelle, und immer wenn man mit der Maus über eine Zeile fährt bekommt die eine bestimmte Hintergrundfarbe, und wenn man die Zeile verlässt kommt wieder die alte Farbe. Das mache ich so:

<tr onmouseover="this.className = 'hoverlines-in'" onmouseout="this.className = 'hoverlines-out'">

Jetzt will ich aber, wenn man in der Zeile auf einen Link klickt, dass ohne die Seite neu zu laden(!) onmouseout keinen Effekt mehr hat, also sobald man geklickt hat bleibt die Farbe, auch wenn man mit der Maus die Zeile verlässt.

Wie kann ich das erreichen?

Viele Grüße
Andreas

  1. Hallo

    Jetzt will ich aber, wenn man in der Zeile auf einen Link klickt, dass ohne die Seite neu zu laden(!) onmouseout keinen Effekt mehr hat, also sobald man geklickt hat bleibt die Farbe, auch wenn man mit der Maus die Zeile verlässt.

    Wie kann ich das erreichen?

    Schreibe ein Javascirpt, mit CSS. Setzte eine Variabel auf 10, wenn du einen Linkklickst und wenn du weg gehst, sollte es zuerst prüfen, ob die Variabel 10 ist. Wenn ja sollte die Hintergrundfarbe nicht geändert werden.

    Ich habe das auch auf meiner Seite gemacht:
    http://www.pfadinewa.ch/FrameOben.htm
    (vorsicht ist nur ein Frame zum Navigieren nicht geeignet)
    Dieses Scirpt funktionniert aber nur bei IE bei Netscape und Mozilla geht es bei mir nicht.

    Gruss Michy

    1. Ich habe das auch auf meiner Seite gemacht:
      http://www.pfadinewa.ch/FrameOben.htm
      (vorsicht ist nur ein Frame zum Navigieren nicht geeignet)
      Dieses Scirpt funktionniert aber nur bei IE bei Netscape und Mozilla geht es bei mir nicht.

      ist auch kein Wnder, du benutzt document.all das ist veraltete IE 4.x Syntax.

      Struppi.

      1. Hy

        ist auch kein Wnder, du benutzt document.all das ist veraltete IE 4.x Syntax.

        Dann nehme ich an, du weisst, was ich benutzen soll.

        Danke schon im Voraus für deine Antwort
        Michy

        1. Hy

          ist auch kein Wnder, du benutzt document.all das ist veraltete IE 4.x Syntax.
          Dann nehme ich an, du weisst, was ich benutzen soll.

          ja, z.b diese Funktion:

          ///////////////////////////////////////////////////////////
          // getById(id [, win])

          function getById(id, win)
          {
              var doc = window.document;

          if(win) doc = win.document;

          if(typeof id == 'undefined') return null;

          var obj = null;
              if(document.getElementById) obj = doc.getElementById(id);
              else if(document.layers) obj = doc.layers[id];
              else if(document.all) obj = doc.all[id];

          return obj;
          }

          Struppi.

          1. Hallo
            Danke für deine Bemühungen

            Gruss Michy

  2. Hallo,

    ich habe eine Tabelle, und immer wenn man mit der Maus über eine Zeile fährt bekommt die eine bestimmte Hintergrundfarbe, und wenn man die Zeile verlässt kommt wieder die alte Farbe. Das mache ich so:

    <tr onmouseover="this.className = 'hoverlines-in'" onmouseout="this.className = 'hoverlines-out'">

    Bist Du sicher, dass dieser Klassentausch immer und überall funktioniert? Warum setzt Du die gewünschten Style-Eigenschaften nicht jeweils in einer JavaScript-Funktion?

    Jetzt will ich aber, wenn man in der Zeile auf einen Link klickt, dass ohne die Seite neu zu laden(!) onmouseout keinen Effekt mehr hat, also sobald man geklickt hat bleibt die Farbe, auch wenn man mit der Maus die Zeile verlässt.

    Wie kann ich das erreichen?

    Indem man bei onclick die Eigenschaft onmouseover auf NULL setzt.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Mouseover</title>
    </head>
    <body>
    <table >
    <tr>
     <td style="background-color:#00AEAD;" onmouseover="this.style.backgroundColor='#FF7D7B';" onmouseout="this.style.backgroundColor='#00AEAD';" onclick="this.onmouseout=null;">Tabellenzelle</td>
    </tr>
    </table>
    </body>
    </html>

    viele Grüße

    Axel

    1. Hi!

      <tr onmouseover="this.className = 'hoverlines-in'" onmouseout="this.className = 'hoverlines-out'">
      Bist Du sicher, dass dieser Klassentausch immer und überall funktioniert?

      Nein, ich weiß auch nicht mehr so genau was ich mir dabei gedacht hatte ;-) Erst hatte ich ne reine CSS-Variante, die natürlich nur im Mozilla funkitoniert, und diese Variante unterstützt glaube ich schon der IE 5. Ich glaube ältere BVrowser können eh nicht auf Events im tr-Element reagieren.

      Warum setzt Du die gewünschten Style-Eigenschaften nicht jeweils in einer JavaScript-Funktion?

      Mal gucken, vielleicht amche ich das auch so.

      Jetzt will ich aber, wenn man in der Zeile auf einen Link klickt, dass ohne die Seite neu zu laden(!) onmouseout keinen Effekt mehr hat, also sobald man geklickt hat bleibt die Farbe, auch wenn man mit der Maus die Zeile verlässt.

      Wie kann ich das erreichen?
      Indem man bei onclick die Eigenschaft onmouseover auf NULL setzt.

      Ah ja, das ist gut! Nur, was mache ich, wenn ich auf eine andere Zeile klicke, und diese markiere, wie kann ich dann die alte wieder "lösen"? Also die Farbe wieder ändeern wie eigentlich bei onmouseout? Und wie aktiviere ich onmouseout wieder?

      Vielen Dank für Dein Hilfe!

      Grüße
      Andreas

      1. Hallo,

        Wie kann ich das erreichen?
        Indem man bei onclick die Eigenschaft onmouseover auf NULL setzt.
        Ah ja, das ist gut! Nur, was mache ich, wenn ich auf eine andere Zeile klicke, und diese markiere, wie kann ich dann die alte wieder "lösen"? Also die Farbe wieder ändeern wie eigentlich bei onmouseout? Und wie aktiviere ich onmouseout wieder?

        Das klappt wohl nicht. Eine Funktion mit Parametern lässt sich, soweit ich weiß, nicht mit JavaScript zuweisen, und mindestens einen Parameter brauchst Du, um zu kennzeichnen, um welche Zelle es nun geht. Man kommt also nichtum eine globale "Flag-Variable" herum.

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        <title>Mouseover</title>
        <script type="text/javascript">
        <!--
        var active_td = null;

        function td_mout(mytd) {
          if (mytd != active_td) {
            mytd.style.backgroundColor = '#00AEAD';
          }
        }
        function td_reset() {
          var tds = document.getElementsByTagName("td");
          for (var i = 0; i < tds.length; i++) {
            if (tds[i] != active_td) {
              tds[i].style.backgroundColor = '#00AEAD';
            }
          }
        }
        //-->
        </script>
        </head>
        <body>
        <table >
        <tr>
         <td style="background-color:#00AEAD;" onmouseover="this.style.backgroundColor='#FF7D7B';" onmouseout="td_mout(this);" onclick="active_td=this; td_reset();">Tabellenzelle</td>
        </tr>
        <tr>
         <td style="background-color:#00AEAD;" onmouseover="this.style.backgroundColor='#FF7D7B';" onmouseout="td_mout(this);" onclick="active_td=this; td_reset();">Tabellenzelle</td>
        </tr>
        <tr>
         <td style="background-color:#00AEAD;" onmouseover="this.style.backgroundColor='#FF7D7B';" onmouseout="td_mout(this);" onclick="active_td=this; td_reset();">Tabellenzelle</td>
        </tr>
        <tr>
         <td style="background-color:#00AEAD;" onmouseover="this.style.backgroundColor='#FF7D7B';" onmouseout="td_mout(this);" onclick="active_td=this; td_reset();">Tabellenzelle</td>
        </tr>
        </table>
        </body>
        </html>

        viele Grüße

        Axel