Maik: Event "Maus auf dem Objekt von Anfang an"?

Hallo,

gibt es eine Möglichkeit, eine Event abzufangen, wenn sich die Maus (auch beim Seitenstart, das ist der Punkt!) auf einem bestimmten Objekt befindet? Das JS-Event onmouseover fängt ja scheinbar nur das Ereignis ab "Maus wurde auf Objekt draufbewegt".

Es geht hier um ein grafisches Menü. Beim Überfahren der Links soll ein Pfeilchen vor den Menüpunkten angezeigt werden, beim Klicken eines Links soll der jeweilige Menüpunkt in einer Farbe dargestellt werden.

Problem: Wird so ein Menüpunkt nach diesem beschriebenen System geklickt, erscheint nach dem Seitenaufbau zunächst kein Pfeil im jeweiligen Menüpunkt (obwohl Mauscursor drauf...), nach der kleinsten Mausbewegung innerhalb der Fläche der Menülinkgrafik aber dann doch wieder, weil onmouseover auftritt. Visuell recht unschön, kann man so vergessen.

Gibt es da einen Trick, außer, die dynamischen Bereiche der Seite, die über das Menü gesteuert werden, jetzt wieder über AJAX zu verwalten? ;)

Gruß Maik

  1. Hi,

    gibt es eine Möglichkeit, eine Event abzufangen, wenn sich die Maus (auch beim Seitenstart, das ist der Punkt!) auf einem bestimmten Objekt befindet? Das JS-Event onmouseover fängt ja scheinbar nur das Ereignis ab "Maus wurde auf Objekt draufbewegt".

    Mauszeiger-Koordinaten auslesen, Objektpositionen in Seite berechnen, ...?

    Gibt es da einen Trick, außer, die dynamischen Bereiche der Seite, die über das Menü gesteuert werden, jetzt wieder über AJAX zu verwalten? ;)

    Spielen wir gerade Bullshit-Bingo, oder was soll AJAX damit zu tun haben?

    MfG ChrisB

    1. Gibt es da einen Trick, außer, die dynamischen Bereiche der Seite, die über das Menü gesteuert werden, jetzt wieder über AJAX zu verwalten? ;)

      Spielen wir gerade Bullshit-Bingo, oder was soll AJAX damit zu tun haben?

      AJAX ermöglicht es, Seitenbereiche (so eben auch den dynamischen Bereich einer Seite, üblicherweise den "in der Mitte"...) zu laden, ohne, dass die Seite komplett neu geladen werden muss. Damit ließe es sich also auch machen, dass das Menü unangetastet bleibt und das beschriebene Problem durch den Wegfall des Menü-Neuaufbaus nicht mehr auftritt.

      (Feine Spiele kennst Du ja schon! ;) )

      1. Hi,

        AJAX ermöglicht es, [blah blubb]

        Das ist mir klar - nur darin eine Loesung fuer dein aktuelles Problem sehen zu wollen, finde ich gelinde gesagt pervers.
        Nur um eine optischen Effektes wegen die Nutzbarkeit der Seite derart einzuschraenken ... (bspw. was bookmarkbarkeit etc. angeht.)

        MfG ChrisB

  2. Hi,

    Beim Überfahren der Links soll ein Pfeilchen vor den Menüpunkten angezeigt werden,

    Warum willst Du das statt per CSS (a:hover) mit Javascript lösen?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi Andreas,

      Beim Überfahren der Links soll ein Pfeilchen vor den Menüpunkten angezeigt werden,

      Warum willst Du das statt per CSS (a:hover) mit Javascript lösen?

      Ja doch, muss ich mir mal anschauen:
      Wenn a:hover das Darstellungsproblem beim Seitenneuaufbau löst, dann wär das wohl eine gute Lösung.

      Gruß Maik

    2. Ein Test (abgewandeltes Beispiel von http://www.1ngo.de/web/bildwechsel.html ) führte erstmal zum Ergebnis, dass CSS das Problem zunächst nicht löst:

      Auch hier erscheint der Menü-Link nach dem Neuaufbau der Seite zunächst NICHT im Hover-Modus, sondern erst nach der ersten Mausbewegung auf dem "aktiven" Link.

      Beispiel mit der Datei test.html:

      ____________________________________________________________________

      <style type="text/css">
        #wechsel a {
          background: url(./grafik/menue/menuepunkt_1_aktiv.png) no-repeat;
          display:block; /* Linkbereich begrenzen */
          width:186px;
        }
        #wechsel img {
          display:block; width:186px; height:46px; border:0;
        }
        #wechsel a:hover img {
          visibility: hidden;
          width:186px;
        }
        #wechsel a:hover { /* Workaround fuer IE 5.5 und 6 */
          border:0;
          width:186px;
        }
        * html #wechsel a {
          margin-right:1px;width:186px;
        }
        * html #wechsel a:hover {
          width:186px; margin-right:0; /* Workaround fuer IE 5.01 */
        }
      </style>

      <div id="wechsel" width="186"> <!-- oder z.B. für Menues <ul id="navigation"><li> -->
        <a href="test.html"><img src="./grafik/menue/menuepunkt_1.png" width="186" height="46" alt="SELFHTML Logo" /></a>
      </div>

      ____________________________________________________________________