Javascript-Navigation anpassen - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Javascript-Navigation anpassen

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Javascript-Navigation anpassen

Pages: [1]

geschrieben von Drehstabenverbucher am 12.11.2005 - 16:09

Hallo

Leider beherrsche ich Javascript so gut wie gar nicht, und CSS nur sehr begrenzt, deshalb brauche ich eure Hilfe.
Und zwar bin ich dabei http://www.javarea.de/index.php3?op....amp;id=469 dieses Script nach meinen wünschen umzuändern.
Ich möchte, dass anstatt von Textlinks, Bilder zu sehen sind.
Das hat auch sehr gut geklappt.
LINK
Nun möchte ich aber folgende Mouseovereffekte einbauen.
Wenn man mit der Maus über einem Link ist, soll nicht das Standart-Bild sondern ein anderes angezeigt werden. Das gleiche gilt auch für eine Kategorie.

Und wenn eine Kategorie (hat auch ein Bild) ausgewählt ist, und man sich zwischen den Links in dieser Kategorie entscheidet (und dabei mit der Maus auf dem zugehörigen Bild des Links) ist, soll das Kategoriebild ein anderes sein. Also nicht das Standartbild.

Ich habe also pro Link und Kategorie 2 Bilder. Eins für onmouseout und eins für onmouseover.

Als anschauliches Beispiel könnt ihr das Windows-Start-Dings nehmen.
Wenn ihr z. B. auf start->alle programme klickt.
Dann wählt ihr "zubehör" aus und seid mit der Maus auf einer Unterkategorie, ist der Hintergrund von "zubehör" immernoch blau. Außerdem die Kategorie, wo die Maus grad drüber ist.

Und genauso soll es bei meiner Navigation werden.

Ich hoffe das ist verständlich erklärt.

mfg

geschrieben von weisnix am 12.11.2005 - 16:44

so ne Frage neben bei:
sind das für die einzelnen Menüs verschiedene Bilder oder sind es nur zwei die dann für alle Menüpunkte gelten?

geschrieben von Drehstabenverbucher am 12.11.2005 - 18:20

Es sind verschiedene Bilder.

Hier mal mein aktueller Status, wie weit ich bin (soll keine Werbung sein ;) )
http://dgb.gamaxx.de/webspell/
Ganz oben ziemlich in der Mitte ist es

geschrieben von weisnix am 12.11.2005 - 21:01

Ein kleines Muster.

geschrieben von Drehstabenverbucher am 13.11.2005 - 11:38

Nun fehlt aber noch eine kleine Sache:
Wenn ich mit der Maus über Link2 bin, also dem Bild "Link 2 M", soll in der Auswahlkategorie das Bild "Link 1 M" sein.
Es wird aber leider noch das Bild "Link 1 N" angezeigt.

geschrieben von weisnix am 13.11.2005 - 11:56

wenn ich das richtig verstanden habe dann so:

HTML-Quelltext

1: 
2: 
3: 
4: 
5:

<ul><li><a href="#" onmouseover="montre('smenu1');on('image1');" onmouseout="cache('smenu1');off('image1')" onClick="alt('image1');"><img src="GrafikAus1.gif" height="35" width="135" border="0" name="image1"></a>	<ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
	<li><a href="#" onMouseOver="on('image2');on('image1');" onMouseOut="off('image2')" onClick="alt('image2');"><img src="GrafikAus2.gif" height="35" width="135" border="0" name="image2"></a></li>
	<li><a href="#" onMouseOver="on('image3');on('image1');" onMouseOut="off('image3')" onClick="alt('image3');"><img src="GrafikAus3.gif" height="35" width="135" border="0" name="image3"></a></li>
	<li><a href="#" onMouseOver="on('image4');on('image1');" onMouseOut="off('image4')" onClick="alt('image4');"><img src="GrafikAus4.gif" height="35" width="135" border="0" name="image4"></a></li>
	</ul></li>

du kannst die Funktionen beliebig kombinieren.

geschrieben von Drehstabenverbucher am 13.11.2005 - 12:40

langsam wirds mir peinlich dass ich so pingelig(ich hoff das wird so geschrieben

) bin.
Aber erstmal:
Vielen Dank dass du mir hilfst

In anderen Foren sind sie gar nicht auf meine Fragen eingegangen.

Eine kleine Sache stört mich noch. Und zwar:
Beim verlassen des Menüs:
Wenn ich die kategorie auswähle, aber kein link klicke, und nach unten das menü wieder verlasse, geht es wieder zu.
Soll auch so sein. Danach soll wieder das Bild "Link 1 N", was standartmäßig angezeigt wird, angezeigt werden.
Das tut es aber nur, wenn das letzte menü, wo die maus drüber war, das bild "Link 1 M" war.
Wenn aber das letzt Bild z.B. "Link 2 M" war, wird noch das Kategoriebild "Link 1 M" angezeigt. Es soll aber das Bild "Link 1 N" angezeigt werden.

Du verstehen?

geschrieben von weisnix am 13.11.2005 - 17:54

Das hätte ich dir jetzt aber selbst zugetraut.

Wenn das Top wieder in den Ursprung nach dem verlassen der li´s soll, muss in das ul das onmouseout mit der zuständigen Anweisung rein.

	Zitat
	<ul><li><a href="#" onmouseover="montre('smenu1');on('image1');" onmouseout="cache('smenu1');off('image1')" onClick="alt('image1');"> <img src="GrafikAus1.gif" height="35" width="135" border="0" name="image1"></a> <ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');off('image1')">

geschrieben von Drehstabenverbucher am 13.11.2005 - 20:20

vielen dank
funzt genauso wie ich es mir vorstelle

geschrieben von Drehstabenverbucher am 13.11.2005 - 21:25

Leider habe ich wieder ein Problem.
Ich habe mal mein aktuellen Status als rar angehängt.

Mein Problem:
Die linke Kategorie funktioniert genauso wie ich es mir vorstelle.
Aber die rechte Kategorie funktioniert nicht. Denn sobald ich mit der Maus über dem Bild "Squads" bin, ist das Kategoriebild "veritas" nicht mehr aktiv, was es eigentlich sollte.

geschrieben von weisnix am 14.11.2005 - 07:52

Jetzt ist natürlich Konzentration angesagt.

Genau durchzählen. Da hilft meistens eine Abstand zwischen den Zeilen zu lassen und Kommentare einsetzen. Mit einem guten Editor lassen sich die Leezeilen dann wieder entfernen.

Dein Fehler ist eindeutig onMouseOver="on('image6');on('image6');"
Das gibt es auch keine Fehlermeldung. Dem Browser ist das nämlich Wurst ob er des gleiche Bild zweimal wechselt.

Wenn in dem Menü beim durchnummerieren eine Lücke entsteht, wir da wohl mit der neusten Browsergeneration kein Fehler auftreten. Sollte dennoch nicht sein. Also, smenu1 – smenu2 usw.

HTML-Quelltext

Zitat