Folgendes Problem: Ich habe mehrere Grafiken, welche als menü dienen. Wenn man jetzt zum Beispiel auf die Grafik "Links" drückt, ändert sich diese Grafik. -Ich benutze onClick, onMouseOver, und OnMouseOut. -Da habe ich jetzt leider das Problem, dass wenn man clickt, sich die Grafik ändert, aber sobald man von dieser wieder weggeht, wieder die Grafik von OnMouseOut kommt...! -Logisch, aber dass soll so nicht sein.
Kriget man es irgendwie hin, dass die Grafik, die bei OnClick kommen soll, auch da bleibt bis man ein anderes Bild anclickt? So dass die onMouseOver und OnMouseOut Funktion, bei dem aktiven Bild ausgeschaltet ist?
OnMouseOver/Out bei aktivem Link ausschalten?
-
-
Ich hatte ein ähnliches Problem und habe es über eine kleine JS-Fkt. gelöst. Dieser Funktion übergebe ich den momentan aktivierten
(also eingetasteten) Menüpunkt (genauer dessen ID) und dieses Script ändert dann die zugehörige Grafik.Z.B. -> du hast 3 Menüpunkte mit den ID's 1,2 und 3. Jedem Punkt gibst du als Anweisung für onMouseOver/onMouseOut folgendes:
"mouseOverFkt(<?echo$itemID;?>"
Dies setzt voraus, dass dein PHP-Script den momentan aktiven Menüpunkt (genauer dessen ID) in $itemID gespeichert hält. Oder du musst
halt Festwerte (1,2,3) vergeben.
Ok, deine Fkt. mouseOverFkt() erhält nun als Parameter die ID des momentan aktiven Menüpunktes. Aufgabe der Funktion ist es ,
jeweils die onMouseOver/onMouseOut-Grafiken zu wechseln -> ES SEI DENN: der momentan aktive Menüpunkt wird mit dem Mauszeiger
verlassen. Dann darf die onMouseOver-Grafik nicht ersetzt werden.
Somit wechseln die onMouseOver/onMouseOut-Grafiken wie gewohnt, nur mit dem Unterschied, dass der momentan aktive Menüpunkt
keine onMouseOut-Grafik erhält.Klingt ein wenig kompliziert, ist aber ziemlich einfach und der gut strukturierte Quellcode ist sicher nur 4-5 Zeilen lang.
Versuch es mal und sonst meldest dich halt wieder hier.
-
Hey, ersteinmal danke für deine Antwort, klingt zwar alles sehr logisch, abe rich kapiere es trotzdem irgendwie nicht!?
Kannste das nochmal näher Erklären, oder ein Beispiel geben? -
Ja klar gern. Hatte unterdessen bemerkt, dass ich ne Kleinigkeit vergessen hatte. Das hole ich nun nach.
b@ck in 10min ...
-
Hier mal ein ganz einfacher Entwurf, der es glaub ich so zeigt wie du es brauchst: mouseOverFkt-Testseite
Ok, also nicht erschrecken. Ich poste einfach mal den gesamten Code der Testseite:
HTML
Alles anzeigen<html> <head> <title>mouseOverFkt-Test</title> </head> <script language="javascript" type="text/javascript"> <!-- function mouseOverFkt(currentItem, activeItem, mode) { // tauscht die Grafik von elemRef aus // currentItem - bezeichnet die zu verändernde Grafik // activeItem - bezeichnet die Grafik des momentan aktiven Menüpunkts // mode - gibt an ob MouseOver oder MouseOut erfolgen soll var imgID = "item"+currentItem; var elemRef = document.getElementById(imgID); switch(mode) { case "over":// MouseOver elemRef.src = new String("item"+currentItem+"_over.gif"); break; case "out": // MouseOut if (currentItem != activeItem) elemRef.src = new String("item"+currentItem+"_norm.gif"); else elemRef.src = new String("item"+currentItem+"_active.gif"); break; } } function setActiveItem(itemID) { // setzt die active-Grafik des Item mit der ID itemID var imgID = "item"+itemID; var elemRef = document.getElementById(imgID); elemRef.src = new String("item"+itemID+"_active.gif"); } --> </script> <body> <? if (!isset($item)) $item = 1; ?> <table width="90%" border="1" cellspacing="0" cellpadding="0"> <colgroup> <col width="20%"> <col width="80%"> </colgroup> <tr> <td> [img]item1_norm.gif[/img], 'over');" onMouseOut="mouseOverFkt(1, <?echo$item;?>, 'out');" onClick="window.location.href='mover.php?item=1';"> </td> <td> <h3>aktueller Menüpunkt: <? echo $item; ?> </td> </tr> <tr> <td> [img]item2_norm.gif[/img], 'over');" onMouseOut="mouseOverFkt(2, <?echo$item;?>, 'out');" onClick="window.location.href='mover.php?item=2';"> </td> <td> </td> </tr> <tr> <td> [img]item3_norm.gif[/img], 'over');" onMouseOut="mouseOverFkt(3, <?echo$item;?>, 'out');" onClick="window.location.href='mover.php?item=3';"> </td> <td> </td> </tr> </table> <script language="javascript" type="text/javascript"> <!-- setActiveItem(<?echo$item;?>); --> </script> </body> </html>
Eine kurze Erläuterung:
* in der PHP-Variable $item ist die Id des momentan aktiven Menüpunktes gespeichert
* mit Klick auf die Grafiken wird diese ID geändert und per URL übergeben
* beim 1. Aufruf der Seite existiert $item nicht und wird mit 1 initialisiert
* nach jedem Seitenaufbau die Grafik des aktiven Items auf "active" gesetzt
* in der mouseOverFkt wird somit der normale Vorgang (onMouseOver/onMouseOut) durchgeführt
* einzig bei dem Item des momentan aktiven Menüpunktes wird die Grafik nicht auf "norm" gewechseltNaja, schau mal ob du damit klar kommst. Sonst frag ruhig nochmal...