Erweiterter "Mouseover"-Effekt ...

[Frank Bauder]

Hallo,

ich habe ein kleines "Problem":

Ich möchte ein Menü gestalten, in dem beim Überfahren der Texte/Grafiken bzw. links der "typische" OnMouseOver/OnMouseOut - Effekt zu sehen ist (soweit KEIN Problem, das habe ich im Griff :).

ABER, nachdem der link angeclickt (OnClick) wird, soll die Grafik in einer "3."-Version geladen werden und sich danach solange nicht mehr verändern bis ein anderer Menüpunkt durch click ausgewählt wurde (..der sich dann genauso verhalten soll wie der vorher ausgewählte), und der "nicht mehr aktuelle" Menüpunkt soll wieder den "Mouseover" - Effekt zeigen ...

Ich habe das mit der "3." Grafik auch gelöst, aber ich muß wenn ich einen anderen Menüpunkt auswähle den ursprünglichen Effekt des vorherigen Menüpunkts sozusagen "manuell" durch nochmaliges Anklicken wiederherstellen und genau das möchte ich vermeiden ...

Für ähnliche Effekte gibt es zwar diverse Applets, aber ich würde gerne wissen, ob das mit vertretbaren Aufwand auch in JS realisiebar ist ..

Also, vielleicht kann mir ja jemand dazu einen Tip geben wäre nett !!!

Besten Dank im vorraus

Frankie

Ich hoffe, daß ich mein Problem so beschrieben habe, daß es auch wer versteht :)))

[brand]

Hi!

Du könntest beim onclick eine Variable setzen (an=nummer_des_links) und im onMouseover und -out eine if-Abfrage machen (if an= ...), die dann den "Hover"-Effekt nur bei den nicht angeklickten Links zuläßt.

mfG
BRAND

[Frankie]

Hi Brand,

erstmal besten Dank für deine Antwort ...

so was ähnliches habe ich schon probiert, mit einem "onclick-zähler" (will das script recht "allgemein" halten, also unabhänging von Anzahl oder Namen der links), der sich wieder zurücksetzt wenn ein anderer link geclickt wird (ich denke das ist so ähnlich wie dein Vorschlag, oder habe ich dich da falsch verstanden?)... aber ich schaffe es einfach nicht, daß der dann nicht mehr aktuelle link den "Hover"-Effekt automatisch beginnt, will sagen die "3.Grafik " des zuletzt geclickten links bleibt einfach unverändert stehen ..

.. vielleicht weißt Du auch da eine Lösung

viele Grüße

Frankie

Hi!

Du könntest beim onclick eine Variable setzen (an=nummer_des_links) und im onMouseover und -out eine if-Abfrage machen (if an= ...), die dann den "Hover"-Effekt nur bei den nicht angeklickten Links zuläßt.

mfG
BRAND

[brand]

Hi!

Du mußt ja einfach bei einem onClick das zuletzt geclickte Bild wieder zurücksetzen.

eine kleinwenig ausführlichere Beschreibung wie ich mir das vorstelle:

var aktuell=0; //oder Nummer oder Name des Linkbildes der Startseite

function maus_drauf(nr)
{
   if (nr!=aktuell) tausche Bild
}

function maus_raus(nr)
{
   if (nr!=aktuell) tausche Bild zurück
}

function klick(nr)
{
   lade seite in den Haupt-frame;
   tausche Bild aktuell; //hier wird das Bild des alten Links zurückgesetzt
   tausche Bild nr; //neues aktuelles Linkbild setzen
   aktuell=nr; //neue aktuelle Seite ist nr
}

Beim funtkionsaufruf mittels onMouseover etc. übergibst du eine entsprechende nr des Bildes aus dem du den Namen des Bildes ableiten kannst. Oder du übergibst den Namen der Bilder und speicherst in der Variable "aktuell" immer den Bildernamen des aktuellen Links

Probleme könnte es eventuell geben, wenn mit dem Back-Button des Browsers zurückgesprungen wird

du könntest auch von den einzelnen seiten des Hauptframes aus die Variable "aktuell" setzen, damit es nicht zu Inkonsistenzen kommt

ich hoffe das war einigermaßen verständlich und korrekt (habe es nicht ausprobiert).

mfG
BRAND

[Frankie]

Hi Brand,

ich denke das könnte so wie Du sagst gehen, ich weiß zwar nicht ob ich das heute noch umsetzten kann, aber vielen Dank für deine Tips ...

Grüße

Frank

Hi!

ich hoffe das war einigermaßen verständlich und korrekt (habe es nicht ausprobiert).

mfG
BRAND

[Sven Laukat]

Hallo Frank.

Wie Brand schon sagte klappt es wirklich mit einer Variablen im "onClick-Event". Ich habe zufällig vor ein paar Tagen genau das gleiche Problem gehabt und folgende Lösung gefunden:
(Ist bei mir zwar mit Layern gelöst, aber das Prinzip müßte auch mit einem 'normalrn' mouseOver-Effekt funktionieren.)

Folgende Variablen mußt du am Anfang initialisieren, sonst geht das alles nicht... von wegen der Globalität und so *smiles* Ich setze mal voraus, daß du dich mit der Handhabung von Variablen und warum sie manchmal Initialisiert werden müssen auskennst.

// "layeralt" speichert den überfahrenen layer, der beim überfahren verschwindet
// Du kannst diese Variable später auch mit Arrayelementen füllen.

var layeralt;

// "altlayer" brauchst du nur, falls du deine zu tauschenden Elemente über Arrays ansprichst.
// Du benutzt sie, um "layeralt" einen Startwert zu verpassen.
// Dann aber erst, wenn das Array schon mit Elementen gefüllt ist.
// (Z.B. in einer Initialisierungsfunktion, die du über "onLoad" im Body-Tag aufrufst.)
// So setzt du sie dann ein: layeralt = layer_[altlayer];
// Für "Startwert" schreibst du eine echte Zahl,
// eben den den Index des Arrayelements des ersten angezeigten Layers
// Natürlich kannst du dir diese Variable auch sparen,
// indem du deinen Startwert direkt in die eckigen Klammern schreibst.
// Also so: layeralt = layer_[Startwert];
// Die Variable "altlayer" macht aber Sinn, wenn du sie mehr als einmal in deinem Script benötigst.
// (Z.B. nochmal in einer Funktion, wo du alles auf den Ausgangszustand zurücksetzt.

var altlayer = Startwert;

// Jetzt folgen drei Funktionen, die den Effekt steuern.
// Sie sind sowohl im Internetexplorer (ie),
// wie auch im Netscape (ns) zu verwenden.

// Die Funktion "wechsel" rufst du über das "onMouseover" Event auf.
// Sie tauscht den überfahrenen Layer, gegen den, den du als "layerindex" übergibst.
// Z.B. wenn du deine zu tauschenden Elemente in einem Array gespeichert hast:
// onMouseover = "wechsel (layer_[21]);
// oder wenn du ein Element direkt über seinen Namen ansprechen willst:
// onMouseover = "wechsel (Elementname);

function wechsel (layerindex)
{
if (ns) layeralt.visibility = "hide";    
     if (ie) layeralt.visibility = "hidden";

if (ns) layerindex.visibility = "show";  
     if (ie) layerindex.visibility = "visible";
}

// Die Funktion "check" rufst du über das "onMouseout" Event auf.
// Sie prüft, ob du mit der Maus über einem anderen Layer, als dem zuletzt angezeigten warst
// und wechselt gegebenenfalls wieder auf den Layer, der angezeigt wurde,
// bevor die Maus über den neuen Layer bewegt wurde.
// Damit die Funktion den Vergleich ausführen kann, wird ihr der aktuell überfahrene Layer übergeben.
// So rufst du die Funktion auf:
// Z.B. bei Verwendung eines Array: onMouseout = "check (layer_[21])";
// Z.B. direkt über den Namen des Elements: onMouseout = "check (Elementname)";

function check (layerjetzt)
{
if(layeralt != layerjetzt)
{
if (ns) layerjetzt.visibility = "hide";    
     if (ie) layerjetzt.visibility = "hidden";

if (ns) layeralt.visibility = "show";  
     if (ie) layeralt.visibility = "visible";
}
}

// Die Funktion "festsetzen" löst dein eigentliches Problem.
// Sie speichert den angeklickten Layer in der Variablen "layeralt"
// Dadurch wird verhindert, daß die Funktion "check" ausgeführt wird,
// da in der if-Abfrage, der Funktion "check", die beiden zu vergleichenden Variablen jetzt gleich sind.
// (Warum das so ist, erkläre ich dir nach dieser Funktion in einem weiteren Text.)
// Du verwendest die Funktion "festsetzen" im Zusammenhang mit "onClick"
// Z.B. bei Verwendung eines Array: onClick = "festsetzen (layer_[21])";
// Z.B. direkt über den Namen des Elements: onClick = "festsetzen (Elementname)";
// Die if-Abfrage für den IE sieht zwar Sinnlos aus, aber ich habe dieses Script für eine Imagemap eingesetzt,
// und ich wollte, daß die Grafik neu gezeichnet wird, weil der IE angeklickte Links mit einem Rahmen versieht.
// Durch Neuzeichnen der Grafik verschwindet der aktuell angezeigte Rahmen wieder.

function festsetzen (layerklick)
{
if(ie)
{
if (ns) layerklick.visibility = "hide";    
     if (ie) layerklick.visibility = "hidden";

if (ns) layerklick.visibility = "show";  
     if (ie) layerklick.visibility = "visible";
}

layerealt = layerklick;  

}

So, jetzt noch die Erklärung. Anfangs hat es bei mir auch nicht funktioniert, weil ich die Festklickvariable über komplizierte if-Abfragen in die Wechselfunktion eingebaut hatte. Nachdem es einfach nicht klappen wollte, habe ich mir den Eintritt der Ereignisse "onMouseover" und "onMouseout" über ein "alert" ausgeben lassen. Und siehe da... Beide treten beim Überfahren eines Elementes zweimal auf!!!

Das erste mal, wenn du drauf fährst, und das zweite mal, wenn der erste Layer gegen den zweiten durch die Wechselfunktion ausgetauscht wurde. Die Maus verläßt den Layer nämlich, wenn er ausgeblendet und der neue eingeblendet wird, und im Gleichen Moment tritt auch ein erneuter "onMouseover" für das neu angezeigte Element ein. Durch diesen zweiten Aufruf wird jedoch die gesammte if-Abfrage sinnlos, denn die Variablen für den Vergleich habe immer den gleichen Wert. Also bleibt nur das Auslagern in eine weitere Funktion; und das ist die Checkfunktion :-)

Ich hoffe du kannst meine Erklärungen und die Funktionen verstehen, und ich hoffe, ich habe bei der Anpassung des Scriptes zur Erklärung keine Fehler eingebaut.

Sven

[Frankie]

Hallo Sven,

vielen Dank für deine Tips !!! Ich denke auch daß das so funktionieren kann ...

Grüße

Frank

Hallo Frank.

» Ich hoffe du kannst meine Erklärungen und die Funktionen verstehen, und ich hoffe, ich habe bei der Anpassung des Scriptes zur Erklärung keine Fehler eingebaut.

Sven

[Sven Laukat]

Nochmals Hallo,

Ich hab vergessen, daß du mit verschiedenen Grafiken arbeiten willst, bei meiner Methode wird aber immer nur eine Grafik zur Zeit angezeigt. Du mußt also in den Funktionen die Stellen ändern, die die Grafiken wieder verstecken.

Ansonsten habe ich mich nach dem Abschicken meines Postings herzlich über meine extra für den IE geschriebene If-Abfrage zum Neuzeichnen des gleichen Elements amüsiert. Die ganze If-Abfragestrucktur innerhalb kann natürlich gelöscht werden. Die mit (ns) sowieso, aber auch die if(ie) können weg. Nur das was dahinter steht natürlich nicht. Bleiben also zwei Zeilen übrieg :-)

Freut mich, daß ich dir helfen konnte,

Sven

[Frankie]

Nochmals Hallo,

Ich hab vergessen, daß du mit verschiedenen Grafiken arbeiten willst, bei meiner Methode wird aber immer nur eine Grafik zur Zeit angezeigt. Du mußt also in den Funktionen die Stellen ändern, die die Grafiken wieder verstecken.

Sven

Hallo Sven,

habe das Problemchen jetzt doch selbst lösen können, allerdings nicht so wie Du vorgeschlagen (trotzdem Danke für die Hilfe :)

Wenn's dich interessiert wie, das Script ist in meiner Antwort zu "Dieter" ...

Gruß

Frankie

[Dieter Schröder-Wrobel]

» ABER, nachdem der link angeclickt (OnClick) wird, soll die Grafik in einer "3."-Version geladen werden und sich danach solange nicht mehr verändern bis ein anderer Menüpunkt durch click ausgewählt wurde (..der sich dann genauso verhalten soll wie der vorher ausgewählte), und der "nicht mehr aktuelle" Menüpunkt soll wieder den "Mouseover" - Effekt zeigen ...

Frankie

Hallo Frankie,

eine relativ einfache Lösung wäre folgendes: (berücksicht aber nicht Resize und ähnliches)

<script language="JavaScript">

var clck = new Array();
   clck[0] = new Image(); clck[0].src = "image_clck0.gif";
   clck[1] = new Image(); clck[1].src = "image_clck1.gif";
   clck[2] = new Image(); clck[2].src = "image_clck2.gif";

var on = new Array();
   on[0] = new Image(); on[0].src = "image_on0.gif";
   on[1] = new Image(); on[1].src = "image_on1.gif";
   on[2] = new Image(); on[2].src = "image_on2.gif";

var out = new Array();
   out[0] = new Image(); out[0].src = "image_out0.gif";
   out[1] = new Image(); out[1].src = "image_out1.gif";
   out[2] = new Image(); out[2].src = "image_out2.gif";

function Bildon(Bildnr)
    {
     if (window.document.images[Bildnr].src !=clck[Bildnr].src)
         {
          window.document.images[Bildnr].src = on[Bildnr].src;
         }
    }

function Bildout(Bildnr)
    {
     if (window.document.images[Bildnr].src !=clck[Bildnr].src)
         {
          window.document.images[Bildnr].src = out[Bildnr].src;
         }
    }

function Bildclick(Bildnr)
    {
    for(i = 0; i < 3; i++)
      {
        window.document.images[i].src = out[i].src;
      }
    
    window.document.images[Bildnr].src = clck[Bildnr].src;
    }

</script>

Dazu der Aufruf:

<a HREF="link1.htm" Target="anzeige" onMouseOver="Bildon(0)" onMouseOut="Bildout(0)" onClick="Bildclick(0)"><IMG SRC="image_out0.gif" width="100" height="20" border="0"></a>
<p>
<a HREF="link2.htm" Target="anzeige" onMouseOver="Bildon(1)" onMouseOut="Bildout(1)" onClick="Bildclick(1)"><IMG SRC="image_out1.gif" width="100" height="20" border="0"></a>
<p>
<a HREF="link3.htm" Target="anzeige" onMouseOver="Bildon(2)" onMouseOut="Bildout(2)" onClick="Bildclick(2)"><IMG SRC="image_out2.gif" width="100" height="20" border="0"></a>

hoffe es hilft weiter

Dieter

[Frankie]

Hallo Dieter,

Danke für deinen Tip ...

Habe das Problem mittlerweile selber gelöst, ganz ähnlich wie Du, wenns dich interessiert:

...

<script language="JavaScript">
<!--

// Navigator

var bn=navigator.appName;
var vn=navigator.appVersion;

// Links (hat nix mit dem Hovereffekt zu tun ...)

var addr = new Array();
addr[1]="main.html";
addr[2]="products.html";
addr[3]="download.html";
addr[4]="order.html";
addr[5]="support.html";
addr[6]="about.html";
addr[7]="studio.html";

function gonow(p)
  {
  location=addr[p];
  }

// Bilder laden
  
menuimg = new Array();
if ((bn!="Microsoft Internet Explorer") (vn.substring(0,3)!="2.0"))
{
menuimg[1]= new Image ();
menuimg[1].src="flag_bild_1.gif";

menuimg[2]= new Image ();
menuimg[2].src="flag_bild_2.gif";

menuimg[3]= new Image ();
menuimg[3].src="../gifs/3rate.gif";

menuimg[4]= new Image ();
menuimg[4].src="f_en01.gif";

menuimg[5]= new Image ();
menuimg[5].src="f_de01.gif";

menuimg[6]= new Image ();
menuimg[6].src="../gifs/5rate.gif";

}

var menu = 0;
var geclickt = 0;

// beim Überfahren

function on_mouse_over(loc,img,menu)  {

if ((bn!="Microsoft Internet Explorer") (vn.substring(0,3)!="2.0"))  {

if (menu == 1 && geclickt != 1)  { loc.src=menuimg[img].src; }
   if (menu == 2 && geclickt != 2)  { loc.src=menuimg[img].src; }
   if (menu == 3 && geclickt != 3)  { loc.src=menuimg[img].src; }
  
} }

// beim Verlassen

function on_mouse_out(loc,img,menu)  {

if ((bn!="Microsoft Internet Explorer") (vn.substring(0,3)!="2.0"))  {

if (menu == 1 && geclickt != 1)  { loc.src=menuimg[img].src; }
   if (menu == 2 && geclickt != 2)  { loc.src=menuimg[img].src; }
   if (menu == 3 && geclickt != 3)  { loc.src=menuimg[img].src; }
  
} }

// beim clicken

function on_click(loc,img,menu)  {

// alles zurücksetzen, sonst bleibt das zuletzt geclickte bis zum nächste überfahren "stehen"  
  
bild1.src = menuimg[1].src;  
bild2.src = menuimg[4].src;  
bild3.src = menuimg[1].src;  

if ((bn!="Microsoft Internet Explorer") (vn.substring(0,3)!="2.0"))  {

if (menu == 1)    {
     loc.src=menuimg[img].src;
   geclickt = 1;
   }
  
   if (menu == 2)    {
     loc.src=menuimg[img].src;
   geclickt = 2;
   }
  
   if (menu == 3)    {
     loc.src=menuimg[img].src;
   geclickt = 3;
   }    
  
} }

// -->
</script>

</head>

<body background="../back/b_ast.gif" bgcolor="#102070" text="Black" link="Green" vlink="Teal" alink="Lime">

<table width="640" border="0" cellspacing="0" cellpadding="0">  
<tr>  

<td width="640" colspan="4" valign="TOP">
  <img src="flag_bild_2.gif" name="bild1" border=0 alt=""
  onMouseOver="on_mouse_over(bild1,1,1);self.status='.. essa site em portugues';return true"
     onMouseOut="on_mouse_out(bild1,2,1);self.status='';return true"
  onClick="on_click(bild1,3,1);self.status='... ausgewählt';return true">
  </td>
</tr>
<tr>
     <td width="640" colspan="4" valign="TOP">
  <img src="f_de01.gif" name="bild2" border=0 alt=""
  onMouseOver="on_mouse_over(bild2,4,2);self.status='.. essa site em portugues';return true"
     onMouseOut="on_mouse_out(bild2,5,2);self.status='';return true"
  onClick="on_click(bild2,6,2);self.status='... ausgewählt';return true">
  </td>
</tr>
<tr>
     <td width="640" colspan="4" valign="TOP">
  <img src="flag_bild_2.gif" name="bild3" border=0 alt=""
  onMouseOver="on_mouse_over(bild3,1,3);self.status='.. essa site em portugues';return true"
     onMouseOut="on_mouse_out(bild3,2,3);self.status='';return true"
  onClick="on_click(bild3,3,3);self.status='... ausgewählt';return true">
  </td>
</tr>
</table>

....