MartinK: onMouseover onMouseout

Hallo,

habe trotz einiger Suche ähnliche Ansätze zu meinem Problem gefunden, aber keine Lösung hinbekommen.
Bei Mouseover über den Text einer Tabellenzelle soll per javascript ein Fenster mit der Zeichnung dazu auf- und bei Mouseout (also bei verlassen des Textes) wieder zu.
Dass das Fenster aufgeht ist kein Problem, aber das Schliessen will nicht so recht.
Bei der unten dargestellten Weise kam unter Dreamweaver IV die Meldung dass zwei Anweisungen vorhanden sind. Browser: Firefox 1.0.1.
Bin für gute Tipps dankbar.

<head>
<script type="text/javascript">
function NeuFenster () {
var F1 = window.open("aufnahmeplatte.png", "Zeichnung");
 }
function FensterZu () {
var F2 = window.close ()
 }
</script>
</head>
<body>
<table>
<tr>
<td> <a onMouseover = "javascript:NeuFenster()" name="F1"
            onMouseout = "javascript:FensterZu()" name="F2"> Aufnahmeplatte 25</a>
</td>
........
</tr>
..........
</table>
</body>

  1. Hallo,

    das kann so generell nicht klappen, da dein geöffnetes Fenster automatisch den Fokus auf sich zieht und dann zwangsläufig der mouseout-Event im darunterliegenden Fenster nicht mehr auftreten kann.

    Ciao
    Heinzelhund

    1. So funktionierts es. Die Idee stammt aus einem späteren Forumeintrag. Es sei dahingestellt ob es "schönes Javascript" ist.

      <head>

      <script type="text/javascript">

      function NeuFenster () {
      F1= window.open("aufnahmeplatte.png", 'Zeichnung', "width=500,height=400,top=200,left=400,scrollbars");

      }

      </script>

      </head>
      <body>
      <table >
        <tr>
          <td>
        <a  href="aufnahmeplatte.png"
        onMouseover="NeuFenster(this.href);return false"
        onMouseout="window.open('aufnahmeplatte.png','Zeichnung').close();">
                      Aufnahmeplatte25 </a></td>

      <td >06 1010</td>
        </tr>
      </table>
      </body>

      1. So funktionierts es. Die Idee stammt aus einem späteren Forumeintrag. Es sei dahingestellt ob es "schönes Javascript" ist.

        Naja, es ist seltsam, da es nicht durchdacht ist.

        <script type="text/javascript">

        function NeuFenster () {
        F1= window.open("aufnahmeplatte.png", 'Zeichnung', "width=500,height=400,top=200,left=400,scrollbars");

        }

        Hier wird der weiter unten übergebene Parameter nicht verwendet, warum?

        </script>

        </head>
        <body>
          <a  href="aufnahmeplatte.png"
          onMouseover="NeuFenster(this.href);return false"
          onMouseout="window.open('aufnahmeplatte.png','Zeichnung').close();">
                        Aufnahmeplatte25 </a></td>

        Da das Fenster gleich geschlossen wird, ist hier bei window.open() keine URL nötig.

        Struppi.

        1. Naja, es ist seltsam, da es nicht durchdacht ist.

          denken ?????

          <script type="text/javascript">

          function NeuFenster () {
          F1= window.open("aufnahmeplatte.png", 'Zeichnung', "width=500,height=400,top=200,left=400,scrollbars");

          }

          Hier wird der weiter unten übergebene Parameter nicht verwendet, warum?

          Sag al Struppi, bist Du Lehrer?? ;-))

          </script>

          </head>
          <body>
            <a  href="aufnahmeplatte.png"
            onMouseover="NeuFenster(this.href);return false"
            onMouseout="window.open('aufnahmeplatte.png','Zeichnung').close();">
                          Aufnahmeplatte25 </a></td>

          Da das Fenster gleich geschlossen wird, ist hier bei window.open() keine URL nötig.

          Wenn ich 'aufnahmeplatte.png' oder/und 'Zeichnung' weglasse gehts nicht mehr.
          Frage: Welchen Parameter übergebe ich unten, der oben nicht verwendet wird?

          Der Javascript-Unwissende MartinK

          1. Naja, es ist seltsam, da es nicht durchdacht ist.

            denken ?????

            eine üblicherweise nicht selten vorkommende Handlung der Spezies Mensch.

            <script type="text/javascript">

            function NeuFenster () {
            F1= window.open("aufnahmeplatte.png", 'Zeichnung', "width=500,height=400,top=200,left=400,scrollbars");

            }

            Hier wird der weiter unten übergebene Parameter nicht verwendet, warum?

            Sag al Struppi, bist Du Lehrer?? ;-))

            Ich?

            </script>

            </head>
            <body>
              <a  href="aufnahmeplatte.png"
              onMouseover="NeuFenster(this.href);return false"
              onMouseout="window.open('aufnahmeplatte.png','Zeichnung').close();">
                            Aufnahmeplatte25 </a></td>

            Da das Fenster gleich geschlossen wird, ist hier bei window.open() keine URL nötig.

            Wenn ich 'aufnahmeplatte.png' oder/und 'Zeichnung' weglasse gehts nicht mehr.
            Frage: Welchen Parameter übergebe ich unten, der oben nicht verwendet wird?

            Nicht weglassen, sondern leer lassen z.b. mit einem Leerstring:''
            Der Parameter lautet bei dir this.href und kein weiter oben verwendet werden als 1. Parameter für die Funktion window.open()

            Struppi.

            1. Heureka!!
              Ich glaube das ist es.

              Hier wird der weiter unten übergebene Parameter nicht verwendet, warum?

              Sag al Struppi, bist Du Lehrer?? ;-))

              Ich?

              Ja, da Lehrer/Lehrerinnen die Angewohnheit haben nicht nur zu sagen "das ist Mist", sondern auch gleich noch nachhaken "warum ist das Mist?" ....;-)

              Und hier die für heute finale Lösung:

              <head>

              <script type="text/javascript">
              function NeuFenster(href) {
              F1= window.open(href,"Zeichnung", "width=500,height=400,top=200,left=400,scrollbars");
                  }
               </script>

              </head>
              <body>
              <table >
              <tr>
              <td>
               <a  href="aufnahmeplatte.png"
               onMouseover="NeuFenster(href);return false"
               onMouseout="F1.close();"> Aufnahmeplatte25 </a>
              </td>
              ..........
              <td > <a href="halter.png"
               onMouseover="NeuFenster(href);return false"
               onMouseout="F1.close();"> Halter </a>
              </td>

              ............

              Grüße
              MartinK

  2. Dass das Fenster aufgeht ist kein Problem, aber das Schliessen will nicht so recht.

    Naja, du versuchst auch nicht das von dir geöffnete Fenster zu schliessen sondern das Hauptfenster.

    <head>
    <script type="text/javascript">
    function NeuFenster () {
    var F1 = window.open("aufnahmeplatte.png", "Zeichnung");
    }

    Das Aufmachen ist soweit in Ordnung, bis auf die Tatsache, dass du die Varaibel F1 lokal definierst, d.h. sie steht ausserhalb der Funktion nicht mehr zu Verfügung. Doch du brauchst sie.

    function FensterZu () {
    var F2 = window.close ()
    }

    Das ist Quatsch, erstmal hat window.close() keinen Rückgabewert und dann willst du hier window also das aktuelle Fenster schliessen. Das ist aber nicht das was du vor hast, sondern du willst eigentlich F1 schliessen,

    <td> <a onMouseover = "javascript:NeuFenster()" name="F1"
                onMouseout = "javascript:FensterZu()" name="F2"> Aufnahmeplatte 25</a>

    Anker brauchen ein href Attribut soweit ich weiss
    'javascript:' ist hier unnötig bis falsch, je nach Browser
    Wozu der Name?

    Dein Problem löst sich in etwas so:

    <a href="#"  
    onMouseover="NeuFenster()"  
    onMouseout = "if(F1 && !F1.closed) F1.close()"  
    
    > Aufnahmeplatte 25</a>
    
    

    und die Funktion benötigt eine kleine Anpassung:

    var F1;  
    function NeuFenster () {  
    F1 = window.open("aufnahmeplatte.png", "Zeichnung");  
    }
    

    Struppi.

    1. Anker brauchen ein href Attribut soweit ich weiss

      Nein, Struppi …

      <a href="#" [snip]>

      … aber Links brauchen eins. Und das muss ein Link sein, damit die Ressource auch ohne JavaScript erreicht werden kann. Also ist unbedingt das Bild zu verlinken; nicht unsinnigerweise der Anfang der Seite.

      Live long and prosper,
      Gunnar

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    2. Hi,

      <td> <a onMouseover = "javascript:NeuFenster()" name="F1"
                  onMouseout = "javascript:FensterZu()" name="F2"> Aufnahmeplatte 25</a>

      Anker brauchen ein href Attribut soweit ich weiss

      Nö, nur wenn es Links sein sollen.

      'javascript:' ist hier unnötig bis falsch, je nach Browser
      Wozu der Name?

      Welchen der beiden Namen meinst Du denn? Es sind ja gleich 2 name-Attribute vorhanden ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Hallo zusammen,

        danke für die Tipps, auch wenns noch nicht funktioniert. Hat mir aber weitergeholfen. Und mich animiert nicht aufzugeben.

        Bis demnächstens
        MartinK

  3. Bei Mouseover über den Text einer Tabellenzelle soll per javascript ein Fenster mit der Zeichnung dazu auf- und bei Mouseout (also bei verlassen des Textes) wieder zu.

    MartinK,
    Dass JavaScript nicht bei jedem Nutzer läuft und deshalb nie für wichtige Dinge eingesetzt werden darf, weißt du?

    <td> <a onMouseover = "javascript:NeuFenster()" name="F1"
                onMouseout = "javascript:FensterZu()" name="F2"> Aufnahmeplatte 25</a>

    Der Wert der Eventhandler-Attribute ist JavaScript; "javascript:" hat darin nichts zu suchen!

    Wenn schon, dann <a href="aufnahmeplatte.png" onmouseover="[code lang=javascript]NeuFenster(); return false">Aufnahmeplatte 25</a>[/code]

    So können Nutzer ohne JavaScript die Ressource auch erreichen. Wenn JavaScript ausgeführt wird, verhindert return false, dass die Ressource zweimal (Link und JavaScript-Popup) geholt wird.

    Dein Vorhaben sollte aber mit CSS umsetzbar sein – völlig ohne JavaScript.

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    1. Wenn schon, dann <a href="aufnahmeplatte.png" onmouseover="[code lang=javascript]NeuFenster(); return false">Aufnahmeplatte 25</a>[/code]

      So können Nutzer ohne JavaScript die Ressource auch erreichen. Wenn JavaScript ausgeführt wird, verhindert return false, dass die Ressource zweimal (Link und JavaScript-Popup) geholt wird.

      ah, daran hatte ich gar nicht gedacht. (dafür hast du vergessen dass sein Problem das schliessen war ;-) )

      Aber es geht noch einfacher:

      Du Funktion:

      var F1;  
      function NeuFenster(url) {  
      F1 = window.open(url, "Zeichnung");  
       }
      

      html:

      <a href="aufnahmeplatte.png" onmouseover="NeuFenster(this.href); return false"  
      onmouseout=" wie in meinem anderen Posting"  
      
      >Aufnahmeplatte 25</a>
      
      

      Dein Vorhaben sollte aber mit CSS umsetzbar sein – völlig ohne JavaScript.

      Ob wir ihm da nicht zuviel zumuten?

      Zumal er eine neue Resource anfordern möchte ist das vielleicht nicht der richtige Weg. Die Grafik könnte ja Riesengross sein und sollte daher nicht schon mitgeladen werden.

      Struppi.

      1. Zumal er eine neue Resource anfordern möchte ist das [CSS] vielleicht nicht der richtige Weg. Die Grafik könnte ja Riesengross sein und sollte daher nicht schon mitgeladen werden.

        Struppi,
        In dem Falle wäre der Aufruf über onmouseover genau unsinnig.

        Live long and prosper,
        Gunnar

        --
        „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)