Mandy: OnMouseOver doppelter Effekt

Hallo,

ist es möglich dass ich bei einem onmouseover eine Klasse, die eine Farbe enthält, sowie gleichzeitig aber auch noch eine Grafik darstellen bzw. "aufrufen" kann?
Beispiel wie es bisher aussieht:
onmouseover="this.className ='naviOver2'"
Jetzt soll halt noch eine Grafik hinzukommen.
Hat jemand einen Tip?

Mandy

  1. Hoi Mandy

    Du kannst innerhalb der Zeile eine neue Anweisung getrennt durch ; machen!

    onmouseover="this.className ='naviOver2';alert('das geht');"

    Ich finde das dann aber schnell unübersichtlich, deshalb würde ich eher eine funktion schreiben. Der onmouseover ruft dann diese Funktion auf.

    function doitFunction() {
      this.className ='naviOver2';
      alert('das geht');
    }

    onmouseover="doitFunction();"

    kaepten

    1. Vielen Dank schon mal für den Tip.Das Problem, was ich noch zusätzlich jetzt habe, ist jenes, dass es nicht wie bei einem üblichen mouseovereffekt zwei Grafiken gibt und auch keinen üblichen Link, sondern bei mir nur eine, die halt erscheinen soll, wenn man mit der Maus drüber geht!
      "Mein" Code sieht so aus:

      <table class="navi2" onmouseover="this.className ='naviOver2'; img.src='../../images/animation direct order.gif'" onclick="loadPage('stuff.asp','')" onmouseout="this.className ='navi2'">
      <tr>...

      Hätte gedacht, es geht so einfach, aber leider nicht. Muß ich die Garfik noch extra definieren oder sowas?

      Hoi Mandy

      Du kannst innerhalb der Zeile eine neue Anweisung getrennt durch ; machen!

      onmouseover="this.className ='naviOver2';alert('das geht');"

      Ich finde das dann aber schnell unübersichtlich, deshalb würde ich eher eine funktion schreiben. Der onmouseover ruft dann diese Funktion auf.

      function doitFunction() {
        this.className ='naviOver2';
        alert('das geht');
      }

      onmouseover="doitFunction();"

      kaepten

      1. "Mein" Code sieht so aus:

        <table class="navi2" onmouseover="this.className ='naviOver2'; img.src='../../images/animation direct order.gif'" onclick="loadPage('stuff.asp','')" onmouseout="this.className ='navi2'">
        <tr>...

        Hätte gedacht, es geht so einfach, aber leider nicht. Muß ich die Garfik noch extra definieren oder sowas?

        "Geht nicht" hilft niemanden weiter.
        was geht nicht? welchen Fehler erhälst du?

        Struppi.

        1. Javascriptfehler, dass er das Element 'img' nicht kennt.

          "Mein" Code sieht so aus:

          <table class="navi2" onmouseover="this.className ='naviOver2'; img.src='../../images/animation direct order.gif'" onclick="loadPage('stuff.asp','')" onmouseout="this.className ='navi2'">
          <tr>...

          Hätte gedacht, es geht so einfach, aber leider nicht. Muß ich die Garfik noch extra definieren oder sowas?

          "Geht nicht" hilft niemanden weiter.
          was geht nicht? welchen Fehler erhälst du?

          Struppi.

          1. Javascriptfehler, dass er das Element 'img' nicht kennt.

            Naja : also einfach so geht das nicht. Da müsstest Du schon den ganzen Code psoten. Wer von uns weiss schon wo und oder überhaupt ob Du ein img instanziert hast ... ? :-)

            kaepten

            1. Ja genau das meinte ich ja vorhin. Ich weiß ja gar nicht wo ich die Grafik instanzieren soll, ohne dass sie gleich zu sehen ist. Wie gesagt, sind es ja nicht zwei, die sich dann abwechseln, sondern nur eine, die beim Mouseover angezeigt werden soll!
              Es gibt auch nicht viel Code zu zeigen...

              <table class="navi2" onmouseover="this.className ='naviOver2'; img.src='../../images/animation direct order.gif'" onclick="loadPage('stuff.asp','')" onmouseout="this.className ='navi2'" cellSpacing="0" cellPadding="0" width="173" border="0">
              <tr>
              <td bgcolor="#fffff" width="141" height="16">Test</td></tr>
              </table>

              Javascriptfehler, dass er das Element 'img' nicht kennt.

              Naja : also einfach so geht das nicht. Da müsstest Du schon den ganzen Code psoten. Wer von uns weiss schon wo und oder überhaupt ob Du ein img instanziert hast ... ? :-)

              kaepten

              1. Ja genau das meinte ich ja vorhin. Ich weiß ja gar nicht wo ich die Grafik instanzieren soll, ohne dass sie gleich zu sehen ist. Wie gesagt, sind es ja nicht zwei, die sich dann abwechseln, sondern nur eine, die beim Mouseover angezeigt werden soll!
                Es gibt auch nicht viel Code zu zeigen...

                Hast du dir mal Gedankern über deine Fehlermeldung gemacht?
                Hast du mal in selfhtml gestöbert?

                Dein vorhaben erschient ziemlich ungenau, was soll den 'img' sein? willst du ein vorhandenes Bild austauschen, willst du ein Bild zu deiner Seite hinzufügen?

                <table class="navi2" onmouseover="this.className ='naviOver2'; img.src='../../images/animation direct order.gif'" onclick="loadPage('stuff.asp','')" onmouseout="this.className ='navi2'" cellSpacing="0" cellPadding="0" width="173" border="0">

                eine Tabelle als Link zu mißbrauchen ist eigentlich auch keine besonders elegante Lösung. Wie du schon merkst musst du hier ziemlich viel einbauen, was mit einem einfachen Link plus Pseudo Klassen wesentlich einfacher und vor allem auch ohne JS  ging.

                Struppi.

                1. Ich hab mir viele Gedanken gemacht, wie ich diese Anforderung umsetzen kann und so ziemlich überall gestöbert.
                  Normalerweist wird eine Mouseoversache so bewältigt.

                  <A onmouseover="imgClose.src ='Fenster_schließen_orange.gif';" onmouseout="imgClose.src='Fenster_schließen_white.gif';" href="javascript:window.close()">
                  <IMG id=imgClose src="Fenster_schließen_white.gif" border=0 name=imgClose></a>

                  --> das imgClose wäre bei mir das img, da es ja leider keine eindeutige Syntax gibt für Grafiken wie z.b. für Klassen(this.Classname)

                  Ich muß das aber leider mit einer Tabelle bewältigen. Der Code ist nicht von mir und er soll nicht verändert werden groß.
                  Das Ganze soll im Ganzen ein Menü darstellen. Wenn ich auf einen Menüpunkt gehe, soll dieser in einer anderen Farbe erscheinen und es soll etwas anderes dastehen(dargestellt durch eine Grafik). Ist wirklich nicht einfach zu erklären.

                  Ja genau das meinte ich ja vorhin. Ich weiß ja gar nicht wo ich die Grafik instanzieren soll, ohne dass sie gleich zu sehen ist. Wie gesagt, sind es ja nicht zwei, die sich dann abwechseln, sondern nur eine, die beim Mouseover angezeigt werden soll!
                  Es gibt auch nicht viel Code zu zeigen...

                  Hast du dir mal Gedankern über deine Fehlermeldung gemacht?
                  Hast du mal in selfhtml gestöbert?

                  Dein vorhaben erschient ziemlich ungenau, was soll den 'img' sein? willst du ein vorhandenes Bild austauschen, willst du ein Bild zu deiner Seite hinzufügen?

                  <table class="navi2" onmouseover="this.className ='naviOver2'; img.src='../../images/animation direct order.gif'" onclick="loadPage('stuff.asp','')" onmouseout="this.className ='navi2'" cellSpacing="0" cellPadding="0" width="173" border="0">

                  eine Tabelle als Link zu mißbrauchen ist eigentlich auch keine besonders elegante Lösung. Wie du schon merkst musst du hier ziemlich viel einbauen, was mit einem einfachen Link plus Pseudo Klassen wesentlich einfacher und vor allem auch ohne JS  ging.

                  Struppi.

                  1. --> das imgClose wäre bei mir das img, da es ja leider keine eindeutige Syntax gibt für Grafiken wie z.b. für Klassen(this.Classname)

                    Wieso gibt es keine eindeutige Syntax?
                    http://www.netzwelt.com/selfhtml/javascript/objekte/images.htm

                    Du hast meine Frage nicht beantwortet, was willst du eigentlich machen?

                    du schreibst onmouseover="img=....."

                    Was ist img, bzw. was soll img sein?

                    Ich muß das aber leider mit einer Tabelle bewältigen. Der Code ist nicht von mir und er soll nicht verändert werden groß.

                    Du hast mit sicherheit so wie du es willst mehr 'groß' zu verändern als wenn du den einfacheren und eleganteren weg gehst statt dem umständlchen und schwereren. Und wie gesagt, durch das was du da verwendest wirst die Seite für 10-20% der User unbenutzbar.

                    Das Ganze soll im Ganzen ein Menü darstellen. Wenn ich auf einen Menüpunkt gehe, soll dieser in einer anderen Farbe erscheinen und es soll etwas anderes dastehen(dargestellt durch eine Grafik). Ist wirklich nicht einfach zu erklären.

                    Offensichtlich. Da du aber immer nur Bruchstücke von dem was du willst, bzw. von dem was du machst uns gibst, wird es immer schwieriger dir zu helfen.
                    Hast du vielleicht mal eine Testseite wo man anschauen kann, was du meinst?

                    Struppi.

                    1. <html>
                       <head>
                        <title>Test</title>
                        <style type="text/css">
                        <!--
                        .navi2 { color: #0000ff; }
                        .naviOver2 { color: #ff0000; }
                        -->
                        </style>
                        <script type="text/javascript">
                        <!--
                        function onOver(cn)
                        {
                         cn = 'naviOver2';
                         document.bild.src = 'bild.gif';
                        }
                        function onOut(cn)
                        {
                         cn = 'navi2';
                         document.bild.src = 'px.gif';
                        }
                        function loadPage()
                        {
                         // hier Seite laden
                        }
                        //-->
                        </script>
                       </head>
                       <body>
                        <table class="navi2" onmouseover="onOver(this.className);" onmouseout="onOut(this.className);" onclick="loadPage('stuff.asp', '')" cellSpacing="0" cellPadding="0" width="173" border="1">
                         <tr>
                          <td bgcolor="#fffff" width="141" height="16">Test</td>
                         </tr>
                        </table>
                        <img name="bild" src="px.gif" alt="bild"></td> <!-- hier wird auf ein leeres Bild (z.B. Transparentes 1x1 GIF) verwiesen -->
                       </body>
                      </html>

  2. Hallo Mandy,

    das ist kein großes Problem. Du packst die Anweisungen in eine Funktion, z.B. so:

    innerhalb <head>:

    <script language"javascript" type="text/javascript">
    <!--
    function wechsel(klasse, wert)
    {
     klasse = wert;
     // hier weitere Aktionen, z.B. Bildwechsel einfügen
    }
    //-->
    </script>

    innerhalb <body>:

    ... onmouseover="wechsel(this.className, 'naviOver2');" ...