|
|||
![]()
Hallo liebe Leute!
Ich hoffe, daß mir jemand bei einem Problem einen Tipp geben kann: Ich have versucht, über CSS ein Menü zu erstellen, daß dem in Vista ähnelt. Hierfür habe ich 3 verschiedene Grafiken erstellt, die die 3 Zustände 1. Normal | 2. Hover | 3. Gedrückt darstellen, und Zeige diese über "background-image:url" an. Das CSS dazu sieht so aus: a {color:#fff;} a:visited {color:#fff;} a:active {color:#fff;} a:hover {text-decoration:none;} a.button {display:block; height:29px; width:120px; float:left; background-image: url(images/button.jpg); text-decoration:none; font-size:11px; font-family:arial, sans-serif; letter-spacing:1px; line-height:29px;} a.button:hover {border:0; height:29px; width:120px; background-image:url(images/button_hover.jpg); cursor ![]() a.button:active {height:29px; width:120px; background-image: url(images/button_pressed.jpg);} Das klappt auch soweit so gut. Nun soll aber der ausgewählte Menüpunkt isolange m Zustand "gedrückt" bleiben, bis ein anderer Menüpunkt ausgewählt ist, auch wenn man in dem Inhaltsframe irgendwo hinklickt... Dazu habe ich folgendes Javascript gefunden und ebenfalls in die menu.htm mit eingebaut: <script type="text/javascript"><!-- function addClass( obj, _className) { return ( obj.className += " " + _className ); } function removeClass( obj, _className) { var regExp = new RegExp("\s*" + _className + "\s*"); return ( obj.className = obj.className.replace(regExp, "") ); } function setActive() { var aElements = document.getElementsByTagName("a"); for(var i=0; i<aElements.length; i++) { removeClass(aElements[i], "a-active"); aElements[i].onclick = new Function("setActive(this)"); } for(var i=0; i<setActive.arguments.length; i++ ) { addClass(setActive.arguments[i], "a-active"); } } window.onload = function() { setActive(); } //--> </script> Dazu noch das CSS: .a-active {font-weight:bold; height:29px; width:120px; background-image: url(images/button_pressed.jpg);} Nun meine Frage(n), wo ich einfach nicht weiterkomme: 1. Das Script scheint zu funktionieren, denn die Schrift wird fett und bleibt so, bis ein anderer Menüpunkt gewählt wird, aber das unter a-acticve angegebene Bild "button_pressed.jpg" wird nicht angezeigt. Stattdessen springt er wieder in den Anfangszustand zurück. Warum??? 2. Bei Firefox funktioniert noch nicht einmal das mit den CSS Buttons richtig. Hier wechselt der Button schon auf den Anfangszustand zurück, sobald man mit der Maus vom Button geht. Weiß jemand, wieso? Hier ein Link zu der Seite, damit Ihr es Euch "live" ansehen könnt: Nabu Bielefeld Test Vielen Dank im Voraus für Eure Tipps!! |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Dropline menü | horst77 | CSS | 1 | 12.08.2009 12:49 |
herunterfahrendes Menü mit CSS | Pablo | CSS | 1 | 27.12.2007 18:07 |
CSS Menü - Buttonfrage | Ralgar | CSS | 6 | 01.12.2006 18:14 |
Mysteriöses in CSS Dropdown Menü | ph!L | CSS | 3 | 21.07.2006 13:31 |
Menü mit CSS aber mit JS Animation? | xy2er | CSS | 6 | 20.03.2005 21:47 |