Hover mal anders?

[ray2mi]

Hallo

Ich würde gerne wissen wie man einen Hover effekt realisiert indem sich 1. das betreffende Objekt ändert und sich die restlichen Objekte auch ändern.

Ich nenne mal ein Bsp.
- Ich habe eine Buttonleiste mit 5 Btns.
- Diese sind alle mit Hellblauen Hintergrund.
- Wenn ich über einen Button gehe dann soll der Orange werden.
- Die anderen sollen da aber gleichzeitig Dunkelblau werden.
- Und dann noch ein weiteres Problem, die sollen nicht mit einmal dunkelblau werden - sondern praktisch zu einem dunkleren Blau faden...

ich dachte da das man irgendwie was machen kann mit opacity aber ehrlich habe ich keine ahnung...ich danke schonmal über jede Hilfe

 

[Maik]

Hi,

ich schieb deine Frage rüber ins Javascript-Forum, denn deine Wunschliste lässt sich mit CSS alleine nicht erfüllen.

Ein Scriptbeispiel (Code / Link) hab ich gerade leider nicht zur Hand, aber ich bin ja glücklicherweise nicht alleine im Forum unterwegs ;-)

Mit JS-Frameworks wie jQuery & Co. sollte sich da aber was stricken lassen, wenn es nicht sogar schon als Plugin existiert.

mfg Maik

 

[DeluXe]

Du willst eine Art Menü bauen, oder?
Zumindest gehe ich jetzt mal davon aus..

Was du brauchst ist eigentlich nicht viel:

1. Als erstes weisst du dem Button die entsprechenden Aktionen zu, sprich in deinem Fall ein onmouseover-Event.
Das könnte z. B. so aussehen:

<button id="button1" onmouseover="faerbe_buttons( this );" value="mein button" type="button"></button>

Die ID muss bei jedem Button anders sein, damit man diese voneinander unterscheiden kann.

Geht man nun mit der Maus über den Button, wird die Funktion faerbe_buttons() aufgerufen, gleichzeitig wird ihr eine Referenz auf den aufrufenden Button übergeben (this).

2. Du brauchst die Funktion, logisch.
Die könnte dann so aussehen:

function faerbe_buttons( element ) {
    // element enthaelt nun die uebergebene Referenz

    // den button faerben
    colorFade(element.id,'background','ff0000','00ff00')

    // alle buttons auf der aktuellen seite einlesen und in einer varaible speichern
    var buttons = document.getElementsByTagName( 'button' );

    // und nun jeden einzeln noch toll faerben
    for( var i = 0; i < buttons.length; i++ ) {
        // den "gehoverten" button ueberspringen
        if ( buttons[i].id == element.id ) continue;

        // alle anderen buttons faerben
        colorFade(buttons[i].id,'background','ff0000','00ff00')
    }
}

Das sollte es schon gewesen sein, zumindest in groben Zügen.
Das verwendete Skript um die Farbcodes zu berechnen kannst du dir hier runter laden.
Die gibt es wie Sand am Meer, da muss man sich nicht den Kopf zerbrechen und das Rad neu erfinden.


Am Rande erwaehnt: Die Funktion ist nicht getestet, das ist jetzt nur mal eben hier rein gehämmert. Es kann also gut möglich sein dass du noch ein paar Denk-/Tipp- oder andere Fehler beheben musst.