Grafik in vier Stadien 'inaktiv' 'aktiv' onmouseover' 'onmouseout'

[Stefan Wagner]

Ich habe eine Framestruktur in der ich links eine Navigationsleiste mit Grafiken habe, die als Links fungieren. Diese Seite soll nie neu geladen werden, sondern 'stehenbleiben'. Für den Benutzer gibt es zur besseren Navigation vier stadien, die die einzelnen Grafiken besitzen können:
1. inaktiver Link [z.B. grau]
2. Aktiver Link[ z.B. hellgrau ]
3. berühren / Mouseover [ r.B. mit 'glow']
4. ohne Aktion die grafik verlassen [ das bedeutet der Benutzer hat den 'glow' gesehn, sich aber dafür entschieden ein anderes Links aufzusuchen [ also als event 'onmouseout' ]

Das Problem entsteht, wenn der der User auf ein Link klickt und danach die grafik verlässt, weil dann der Mouseout aktiv wird.
Ich bin mir nicht sicher, ob ich diese Aktionen alle mit if, else - schleifen lösen soll.

anscheinend gibt es keine Hirarchie innerhalb mouseover, -out, down.

Ich bin für jede Anregung dankbar und bin auch auf der Suche nach freien Mitarbeitern, die genau diesen Bereich Javascript abdecken. Wer also auf eine excellente Lösung kommt, wird gerne für seine Arbeit entlohnt.

MfG Stefan Wagner | e-werk
www.e-werk.net

[Stefan Muenz]

Hallo Stefan,

Das Problem entsteht, wenn der der User auf ein Link klickt und danach die grafik verlässt, weil dann der Mouseout aktiv wird.
Ich bin mir nicht sicher, ob ich diese Aktionen alle mit if, else - schleifen lösen soll.
anscheinend gibt es keine Hirarchie innerhalb mouseover, -out, down.

Probier mal, statt mit onmousedown den Event-Handler onclick als Ausloeser zu verwenden. Das Zusammenspiel von onmouseover, onmouseout und onclick funktioniert eigentlich ganz gut...

viele Gruesse
  Stefan Muenz

[Klaus Junge]

Hallo Stefan,

Ich habe eine Framestruktur...

1. inaktiver Link [z.B. grau]
2. Aktiver Link[ z.B. hellgrau ]
3. berühren / Mouseover [ r.B. mit 'glow']
4. ohne Aktion die grafik verlassen [ das bedeutet der Benutzer hat den 'glow' gesehn, sich aber dafür

entschieden ein anderes Links aufzusuchen [ also als event 'onmouseout' ]

damit solltest Du eigentlich schon alle Zutaten haben.

In Deiner Framedefinition darfst Du im HEAD
JS-Variablen und Funktionen definieren.
Diese sind dann allen abgeleiteten Objekten zugänglich.

Als Erstes holst Du Dir die IMGs mit preload in ein Array.
Nach dem Strickmuster:

function ImagePreload(img)
{ var a=new Image(); a.src=img; return a; };

if(BrowserVersionOk)
{
NavBut_Presentation_n  = ImagePreload('../IMAGES/NAVBUTS/BPRESN.JPG');
NavBut_Presentation_h  = ImagePreload('../IMAGES/NAVBUTS/BPRESH.JPG');
NavBut_Presentation_d  = ImagePreload('../IMAGES/NAVBUTS/BPRESD.JPG');

hier ist
...N = normal,
...H = highlited und
...D = darkened.

In Deiner Navigationsleiste sind die inaktiven Bilder als
'default' verzeichnet [1].
Deine Mouse-Events rufen eine Funktion 'UpDateIMG' in der
Framedefinition auf. Als Parameter kannst Du dann noch
mitgeben ob es ein mouseover [3] oder ein mouseout [4] ist.
Den Aktiven Link [2] musst Du mit dem onClick-event machen

Im Navigationsframe steht zB eine Latte von:

<a href="PRESENT.HTM"
       target="MAIN"
       OnMouseOver="UpDateIMG(0,0);return true"
       OnMouseOut ="UpDateIMG(0,1)"
       OnClick="UpDateIMG(0,2)">
      <img src="../IMAGES/NAVBUTS/BPRESN.JPG"
           border="0"
           alt="Presentation"
           align="middle"
           name="NavBut_Presentation"></a><br>

Hier wird Deine Navigationsleiste aufgebaut und
mit den inaktiven Buttons vorbelegt.
Die Events rufen Deine 'UpDateIMG' auf.
Dort musst Du dann eine Funktion haben die Deine
Parameter abcheckt und die Bilder entsprechend
umschaufelt. Einschliesslich entweder oder...

(document['NavBut_Presentation'].src=NavBut_Presentation_h.src);
(document['NavBut_Presentation'].src=NavBut_Presentation_n.src);
(document['NavBut_Presentation'].src=NavBut_Presentation_d.src);

Falls Dir ein grosses 'UpDateIMG' zu unhandlich ist,
kannst Du für jede Art von Event eine eigene Funktion schreiben,
zB ButtonTouched(), ButtonLeaved(), ButtonClicked().

Unter den Variablen kannst Du auch eine wie NumPageLoaded haben,
diese Variable wird beim Laden einer Seite gesetzt und damit
kannst Du steuern welches Dein Aktiver Link ist. Wenn Du diese
Variable beim ersten Laden Deines Framesets auch noch zB auf -1
setzt, kannst Du erkennen ob schon eine Wahl stattgefunden hat.

Das in Kürze, falls brauchbar werden wohl noch ein Paar
Postings fällig sein.

Klaus

[Christine Kuehnel]

Hallo,

1. inaktiver Link [z.B. grau]
2. Aktiver Link[ z.B. hellgrau ]
3. berühren / Mouseover [ r.B. mit 'glow']
4. ohne Aktion die grafik verlassen [ das bedeutet der Benutzer hat den 'glow' gesehn, sich aber dafür entschieden ein anderes Links aufzusuchen [ also als event 'onmouseout' ]

Ist Nr. 4 ein eigener Zustand, oder nur zurueck zum Ursprungsstadium?

Ungefaehr das, was Du suchst, duerfte das hier sein (aus meinen "Tips und Tricks"):
http://screenexa.net/js_notiz/tips/change.htm
Das ist natuerlich nur das Grundprinzip. Alles andere (Reload, Resize, Back, Forward) haette den Rahmen, fuer den es gedacht ist, gesprengt.
Aber das Grundprinzip braucht man schliesslich zuerst :-)

Christine

[Cheatah]

Hi,

unter http://cheatah.net/neu kannst Du mit Netscape 4(!) im Menu den von Dir gewünschten Effekt sehen, nur daß ich bei onMouseOut gleich wieder auf den Stand "inaktiv" gehe. Im Grunde wird nur geprüft, ob der onMouseOut-registrierte Button aktiv ist und dann entsprechend gehandelt. Vielleicht findest Du im Code den richtigen Anhaltspunkt!

Cheatah