grOOvekill@
LegendVienna Badass
|
S'gott, okay, folgendes: Nachdem ich die letzte Zeit an der Erstellung einer Website gesessen bin und diese fast fertig ist, kann ich mal fragen, wie ich ein Problem beseitigen kann, welches mich schon lange beschäftigt. Unter diesem Link könnt ihr euch mal die Navigationsleiste ganz links ansehen. Diese wurde mit Javascript realisiert und ist mit einem Mouse-Over-Effekt versehen. Bei einem Klick darauf ändert sich die Unternavigationsleiste. Dummerweise sollte, nach einem klick auf einer der Hauptpunkte, die Mouse-Over Grafik des Buttons stehen bleiben, tut sie aber nicht. Sobald man mit der Maus wegfährt, wird wieder der ursprüngliche Zustand hergestellt. Ein Punkt, der mich echt zu schaffen macht,zumal ich nicht den leisesten Furz einer Ahnung habe, wie ich ds beheben soll. Auf diversen Javascript Seiten konnte ich leider keine Info diesbezüglich finden. Hier auf jeden Fall der Code, für den Fall, daß ihn sich einer durchsehen will. Ich wäre euch wirklich sehr dankbar, wenn ihr mir hier weiterhelfen könntet. ich steh' volle Kanne an!
<HTML>
<HEAD>
<TITLE>Hauptnavigation</TITLE>
<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "images/home.jpg"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "images/home_over.jpg"; /* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "images/agenda21.jpg"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "images/agenda21_over.jpg"; /* zweite Highlight-Grafik */
Normal3 = new Image();
Normal3.src = "images/projektgruppen.jpg"; /* zweite Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "images/projektgruppen_over.jpg"; /* zweite Highlight-Grafik */
Normal4 = new Image();
Normal4.src = "images/termine.jpg"; /* zweite Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "images/termine_over.jpg"; /* zweite Highlight-Grafik */
Normal5 = new Image();
Normal5.src = "images/kontakt.jpg"; /* zweite Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "images/kontakt_over.jpg"; /* zweite Highlight-Grafik */
function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY bgcolor="#AA0044" style="background-image:url(images/navi_main.jpg);
background-repeat:no-repeat; background-attachment:fixed; background-position:top-left;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="23"></td>
</tr>
<tr>
<td>
<a href="" onClick="parent.parent.navi_unter.location='navi_unter.html';
parent.parent.main.location='main.html'; return false;"
onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">
<img src="images/home.jpg" border="0" style="position:absolute;left:6px;"></a></td>
</tr>
<tr>
<td height="46"></td>
</tr>
<tr>
<td><a href="navi_unter_agenda.html" target="navi_unter"
onMouseOver="Bildwechsel(1,Highlight2)" onMouseOut="Bildwechsel(1,Normal2)">
<img src="images/agenda21.jpg" border="0" style="position:absolute; left:6px;"></a></td>
</tr>
<tr>
<td height="23"></td>
</tr>
<tr>
<td><a href="navi_unter_projektgruppen.html" target="navi_unter"
onMouseOver="Bildwechsel(2,Highlight3)" onMouseOut="Bildwechsel(2,Normal3)">
<img src="images/projektgruppen.jpg" border="0" style="position:absolute; left:6px;"></a></td>
</tr>
<tr>
<td height="23"></td>
</tr>
<tr>
<td><a href="navi_unter_termine.html" target="navi_unter"
onMouseOver="Bildwechsel(3,Highlight4)" onMouseOut="Bildwechsel(3,Normal4)">
<img src="images/termine.jpg" border="0" style="position:absolute; left:6px;"></a></td>
</tr>
<tr>
<td height="23"></td>
</tr>
<tr>
<td><a href="navi_unter_kontakt.html" target="navi_unter"
onMouseOver="Bildwechsel(4,Highlight5)" onMouseOut="Bildwechsel(4,Normal5)">
<img src="images/kontakt.jpg" border="0" style="position:absolute; left:6px;"></a></td>
</tr>
</table>
</BODY>
</HTML>
|
watchout
Legendundead
|
schau dir mal mein post in dem stadtplan-thread an, vielleicht hilfts dir auf die sprünge 
|
atrox
in fairy dust... I trust!
|
du mußt dir natürlich merken. was der user zuletzt angeklickt hat (zb über onClick) und verwendest beim mouseOut diese information. vermutlich wirst du dir da eine neue funktion machen, aber es geht natürlich auch ohne.
|
grOOvekill@
LegendVienna Badass
|
Pff.. Nee, sorry, auch da steh' ich wieder mal an. Ich hab folgendes probiert:
Ich hab versucht eine Funktion zu schreiben, die bei einem onClick in einer Funktion einer Variablen den Namen der Mouse_over Grafik zuweist. Nur, hat das Ganze ja nur dann Gültigkeit, wenn eben auch geklickt wird. Wie ich das dann mit dem onMouseOut kombiniere, ist mir noch schleierhaft. Des haut irgendwie nicht hin.
|
Rektal
Here to stay
|
Einfacher waers wenn du in einer Variable speicherst welcher Menupunkt gerade ausgewaehlt wurde (die nummer).
Beim onmouseout event pruefst du, ob diese nummer des jeweiligen menus in der variable steht, falls ja soll er die grafik nicht austauschen.
Du musst aber auch beruecksichtigen, wenn ein anderer menupunkt ausgewaehlt wird, musst du beim alten menupunkt wieder die grafik einsetzen um anzuzeigen das dieser nicht mehr aktiv ist. da du die nummer des menu punkts aber in der variable hast, ist das kein Problem.
pseudo code:
onclick:
- pruefe variable ob anderer menupunkt aktiv ist, wenn ja setze anderen menupunkt inaktiv
- setze aktuellen menupunkt aktiv
- merke in variable aktuellen menupunkt
onmouseout:
- preufe ob variable ueber aktiven menupunkt der ist von wo das onmouseout event kommt, falls ja, menupunkt auf aktiv lassen
- ansonsten menupunkt auf inaktiv setzen
Trivialge geschichten wie z.b. onclick event auf bereits aktuellen menupunkt sind da jetzt nicht drin.
btw, es ist einfacher wenn du konsistenter mit der variablengebung bist. damit meine ich Highlight1 bis 5 aber die menus haben IDs von 0 - 4. Wenn du das konsistent machst kannst du die die jeweilige grafik einfacher ueber die ID finden.
|
Rektal
Here to stay
|
Hier eine bearbeitete Version deiner Seite: http://dillerpartner.at/~mfischer/p...ekill_rekt.htmlDer Kern ist die window.onload Funktion. Diese ist so geschrieben da sie alle link mit einem class attribut "ro-.*" sucht und diese dann fuer die navigation manipuliert (onclick, onmouseover und onmouseout events erstellen). Der Vorteil ist da Markup und Script sauber getrennt werden (musst den event handler code nicht ueberall ins HTML reinschreiben sondern hast alles an einem platz). Welches Bild getauscht werden soll wird mit einem Trick ueber das Class attribut gemacht. Es wird quasi als Meta speicher genutzt in dem nach dem ro- immer der name der datei auf dem server steht. Mit einer regular expression wird dies rausgefiltert und dann als neues property dem jeweiligen link zugewiesen damit der es immer hat. Zusaetzlich enthaelt jeder link auch eine Referenz auf das Element das das zu wechselnde Bild enthaelt. Der Nachteil ist wahrscheinlich das mans nicht gleich versteht wenn man kein DOM kennt . . . HTH
|
Anmeldung