Klaus Junge: Grafik in vier Stadien 'inaktiv' 'aktiv' onmouseover' 'onmouseout'

Beitrag lesen

SELF-Forum

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

Klaus Junge
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln