OnMouseEffekte

EifelFrosch

Mitglied
Hallo zusammen,

ich habe folgendes Problem und ich würde mich freuen, wenn Ihr mir dabei helfen könntet.

Ich muss ein Menü kreieren mit folgenden Eigenschaften:

Bei "über den Button gehen" soll das Bild wechseln und wenn man den Button wieder verlässt, soll das Ursprungsbild wieder da sein:

SOWEIT KLAPPT DAS.

Wenn ich jedoch auf den Button klicke, soll ein drittes Bild erscheinen und auch bleiben, bis ein anderer Menüpunkt angeklickt wird.
Bei den anderen Buttons sollen aber weiterhin die onMouseEvents beim drüber und weggehen funktionieren.
Das beste wäre, wenn es noch funktionieren würde, wenn man bei dem geklickten Menüpunkt ein weiteres OnMouseOver und OnMouseOut realisieren könnte.

Wer kann mir helfen, ist sehr dringend!

Danke im Voraus.
 
Das ist alles realisierbar, zum Beispiel indem man die jeweiligen Zustände in Variblen (oder einem Array) speichert.

Es müssen dann zwar immer eine Menge werte abgefragt werden, aber bei einem sauberen Konzept und sauberem Code sollte sowas machbar sein.

Am besten schaust du mal nach Variablen/Arrays in JavaScript, alternativ könntest du Cokkies nutzen!
 
Hallo,

danke schonmal für die Antwort, aber das nützt mir nicht viel, weil ich nicht weiß, wie ich das Problem angehen soll :-/
Gibts da nirgendwo entsprechenden Code, der das ausführt und den ich dann modifizieren kann?

Gruß
 
Ich wüsste jetzt keinen fertigen, aber mit etwas Lerneifer und durchsuchen unserer Webmaster-FAQ und deren Muster-Codes solltest du einige Beispiele haben, die Dir einen Ansatz verdeutlichen.

Für weitere Fragen stehen wir dann gerne zur Verfügung!
 
Guten Morgen,

ich glaube, ich habe einmal etwas geschrieben, was Du suchst. Ein Button kann
folgende vier Zustände annehmen:
  • Grundzustand und Maus befindet sich nicht über Schaltfläche (normal, out)
  • Grundzustand und Maus befindet sich über Schaltfläche (normal, over)
  • Link aktiv und Maus befindet sich nicht über Schaltfläche (high, out)
  • Link aktiv und Maus befindet sich über Schaltfläche (high, over)

Das nachstehende Script realisiert eine solches Verhalten.
Code:
// IDs der Link-Buttons angeben
var arrIDs = new Array("homeID", "newsID", "sendID", "mixedID");

// Normal-Buttons ohne Over-Effekt
var arrNormalOut = new Array("bilder/4states/home_n_out.gif",
                             "bilder/4states/news_n_out.gif",
                             "bilder/4states/send_n_out.gif",
                             "bilder/4states/mixed_n_out.gif");
// Normal-Buttons mit Over-Effekt
var arrNormalOver = new Array("bilder/4states/home_n_over.gif",
                              "bilder/4states/news_n_over.gif",
                              "bilder/4states/send_n_over.gif",
                              "bilder/4states/mixed_n_over.gif");
// High-Buttons ohne Over-Effekt
var arrHighOut = new Array("bilder/4states/home_h_out.gif",
                           "bilder/4states/news_h_out.gif",
                           "bilder/4states/send_h_out.gif",
                           "bilder/4states/mixed_h_out.gif");
// High-Buttons mit Over-Effekt
var arrHighOver = new Array("bilder/4states/home_h_over.gif",
                            "bilder/4states/news_h_over.gif",
                            "bilder/4states/send_h_over.gif",
                            "bilder/4states/mixed_h_over.gif");

/* +++++++++++++++ Ab hier nichts mehr ändern +++++++++++++++++ */
// assoziatives Array für die Buttons
// Syntax: arrButtons['BildID'][Buttontyp], mit Buttontyp: 0..3
// 0 - normal ohne over
// 1 - normal mit over
// 2 - high ohne over
// 3 - high mit over
var arrButtons = new Array();

/* +++++++++++++++ Buttons preloaden +++++++++++++++++++++++ */
// ID-Array durchlaufen
for(var i=0; i<arrIDs.length; i++){
    // Neues assoziatives Array anlegen - ID als Key
    arrButtons[arrIDs[i]] = new Array(4);

    arrButtons[arrIDs[i]][0]     = new Image();
    arrButtons[arrIDs[i]][0].src = arrNormalOut[i];
    arrButtons[arrIDs[i]][1]     = new Image();
    arrButtons[arrIDs[i]][1].src = arrNormalOver[i];
    arrButtons[arrIDs[i]][2]     = new Image();
    arrButtons[arrIDs[i]][2].src = arrHighOut[i];
    arrButtons[arrIDs[i]][3]     = new Image();
    arrButtons[arrIDs[i]][3].src = arrHighOver[i];
}

/* +++++++++++++++ Variablen ++++++++++++++++++++++++++++++++ */
var strOldID = "";

/* +++++++++++++++ Browserweiche +++++++++++++++++++++++++++ */
IE = document.all && !window.opera;
DOM = document.getElementById && !IE;

/* +++++++++++++++ Button-Funktionen ++++++++++++++++++++++++ */
// Funktion für Over- bzw. Out-Effekt
// strID: ID des Bildes, auf das gewünschter Effekt angwandt werden soll
// intIsOver: 0 - OutEffekt, 1 - OverEffekt
function overEffekt(strID, intIsOver){
    var myObj = (IE)?document.all[strID]:document.getElementById(strID);

    // Falls gewünschter Button nicht gehighlighted ist
    if(strOldID != strID){
        // Falls gehighlighted werden soll
        if(intIsOver == 1)
            myObj.src = arrButtons[strID][1].src;
        else
            myObj.src = arrButtons[strID][0].src;
    }else{
        // Falls gehighlighted werden soll
        if(intIsOver == 1)
            myObj.src = arrButtons[strID][3].src;
        else
            myObj.src = arrButtons[strID][2].src;
    }
}

// Funktion zum Merken des aktiven Links
// strID - ID zum Link, der aktiviert bleiben soll
function activeLink(strID){
    // Objekt ermitteln
    var myObj = (IE)?document.all[strID]:document.getElementById(strID);
    // Fall bisher noch kein Link gewählt wurde
    if(strOldID == ""){
        strOldID = strID;  // Akt. ID merken
        myObj.src = arrButtons[strID][3].src;	// Highlight-Button zuweisen
    }else{
        // Fall es nicht um den bereits aktiven Link handelt
        if(strOldID != strID){
            // Objekt ermitteln
            var myOldObj = (IE)?document.all[strOldID]:document.getElementById(strOldID);
            myOldObj.src = arrButtons[strOldID][0].src;  // Button des alten Links zurücksetzen
            myObj.src = arrButtons[strID][3].src;  // Highlight-Button des neuen Links setzen
            strOldID = strID;  // Akt. ID merken
        }
    }
}
arrIDs - hier gibst Du die IDs der Bilder ein, die gewechselt werden sollen
arrNormalOut - hier gibst Du die Pfade zu den Bildern im Grundzustand
ohne Over-Effekt an. Die Reihenfolge muss mit der in arrIDs übereinstimmen!
(z.B. ID zu home befindet sich in erster Komponente, Pfad zum Bild ebenfalls)
arrNormalOver, arrHighOut, arrHighOver - siehe arrNormalOut und Kommentare
im Quellcode

Mit folgendem HTML-Fragment könnte obiges Script aufgerufen werden.
Code:
<a onmouseover="overEffekt('homeID', 1);" onmouseout="overEffekt('homeID', 0);" href="javascript: activeLink('homeID');"><img id="homeID" src="bilder/4states/home_n_out.gif" width="120" height="25" border="0" alt=""></a>
<a onmouseover="overEffekt('newsID', 1);" onmouseout="overEffekt('newsID', 0);" href="javascript: activeLink('newsID');"><img id="newsID" src="bilder/4states/news_n_out.gif" width="120" height="25" border="0" alt=""></a>
<a onmouseover="overEffekt('mixedID', 1);" onmouseout="overEffekt('mixedID', 0);" href="javascript: activeLink('mixedID');"><img id="mixedID" src="bilder/4states/mixed_n_out.gif" width="120" height="25" border="0" alt=""></a>
<a onmouseover="overEffekt('sendID', 1);" onmouseout="overEffekt('sendID', 0);" href="javascript: activeLink('sendID');"><img id="sendID" src="bilder/4states/send_n_out.gif" width="120" height="25" border="0" alt=""></a>
Der Code zeigt neben dem Aufruf der Funktionen, wie die IDs gesetzt werden müssen,
damit das Script funktionieren kann.

So, ich hoffe, Du kannst etwas damit anfangen ... und dass es nicht schon zu spät war.
Für Fragen stehe ich die nächsten Tage leider nicht zur Verfügung, es kann Dir aber
sicherlich jemand anderes hier weiterhelfen.

Ciao
Quaese
 

Neue Beiträge

Zurück