mehrere Hintergründe bei Hover ändern

[effe303]

Hallo Community,

der Titel hört sich jetzt vielleicht weniger schwierig an,
als mein Problem für mich in Wirklichkeit ist...aber hörts euch bitte erst mal an

Es geht um Folgendes:

Ich habe eine Seitennavigation mit Hover-Effekten und ausklappbarer Subnavigation.


Die blauen Linien kennzeichnen meine Tabelleneinteilungen.
Ich möchte von diesem Zustand (Bild oben) zu diesem Zustand kommen:



Wie schon gesagt, der Hovereffekt und das Ausklappen funktioniert wunderbar,
allerdings brauch ich jetzt speziell eine Lösung dazu, dass der ganze orange Hintergrund grau wird,
sobald die Subnavigation ausklappt...

So siehts momentan aus:


Ich hatte mir das so ausgedacht:
(Vorweg mein dazugehöriger HTML-Quelltext)

Code: Alles auswählen

    <table width="658" border="0" cellpadding="0" cellspacing="0">                       
      [1]                              <tr style="background-image:url(img/bg_navi.jpg)">
                                            <td width="20" height="75" style="background-image:url(img/img_11.jpg)">                                           
                                            </td>
                                            <td width="62" height="62" style="background-image:url(img/bg_navi.jpg)" valign="top">
                                                <a href="home.htm"><img src="img/img_12.jpg" border="0" width="62" height="62" alt="Startseite" /></a>
                                            </td>
      [2]                                  <td id="mydroplinemenu" class="droplinebar" valign="top">
                                                <ul>                                       
                                                    <!-- Angebot -->
                                                    <li><a href="angebot.htm" id="abt"></a>

                                                  .... usw. ....

                                                    </li>
                                                </ul>
                                            </td>
                                            <td width="20" height="75" style="background-image:url(img/img_13.jpg)">
                                            </td>
                                        </tr>
                                    </table>

Wenn ich bei [2] einen Mouseover, irgendwie registriert per CSS, hab, soll bei [1] der background geändert werden zu dem Grauen.
Dazu müssten bei den anderen <td>'s (mit background) der background dann verschwinden...

Muss ich dazu sogar evtl. mit Javascript arbeiten?

Ich hoffe, ich habe mich da verständlich ausgedrückt

Lg

[werwer]

Dazu müssten bei den anderen <td>'s (mit background) der background dann verschwinden...

Die Elemente bei dene sich der HG ändern soll bekommen eine id zB: <td id="hg1">
der Link bekommt ein onmouseover="wechsel(1)" onmouseout="wechsel(2)"
und im head brauchst du die funktion

Code: Alles auswählen

<script>
function wechsel(w)
{
  if(w==1)
document.getElementById('hg1').style.backgroundImage = "url("img neu")";
  if(w==2)
document.getElementById('hg1').style.backgroundImage = "url("img alt")";
}

</script>

[Azra]

Hängt davon ab, ob die zu ändernden Elemente im HTML miteinander zusammenhängen, z.B. Teil der gleichen Struktur sind.
Und von Layout-Tabellen solltest du ganz schnell weg kommen.

Wenn du der <td> eine Klasse verweist kannst du diese bei hover ansprechen und das background-image durch ein Grau ersetzen.
Müsste irgendwie schon funktionieren.

[effe303]

@werwer:

Ich versuche es erst einmal ohne Javascript zu ändern,
aber komme nach Misslingen noch einmal auf deine Möglichkeit zurück

@azra:

Das Tabellenlayout war Vorgabe. Da darf ich (leider) nicht dran rütteln...

Wenn du der <td> eine Klasse verweist kannst du diese bei hover ansprechen und das background-image durch ein Grau ersetzen.

Meinst du das jetzt mit CSS oder Javascript?
Wenn CSS gemeint war, könntest du mir einen Pseudoscript vielleicht präsentieren?
Dann könnte ich mich daran ein wenig orientieren!
Ich weiß nämlich nicht, wie ich (ich nenn es jetzt einfach mal:) elternelementübergreifend Verknüpfungen
zwischen den IDs und deren MouseOver erstellen kann...

Wie gesagt, [2] (s. Quelltext erster Post) ist ja tabellarisch untergeordnet zu zu [1].
Kann man das trotzdem per CSS ansteuern? Oder habe ich das einen Gedankendreher?

lg

[Azra]

Ich habe sehr viel ausprobiert, herumgespielt.
Scheinbar ist es tatsächlich nicht möglich zwei hintergrundflächen gleichzeitig zu ändern.
Ich kann es allerdings nur zu 90% garantieren dass es so ist - ich habe es geschafft gleichzeitig Hintergrundfarbe eines Containers und die Linkfarbe eines <span>-Tags zu ändern.
Allerdings bleibt der Hintergrund des <span> immer der selbe (auch mit !important).

Du scheinst dich also auf JavaScript verlassen zu müssen.

[effe303]

Ok danke, hab das jetzt mit JS gelöst

Code: Alles auswählen

var n = 0;
function nbgchange(n) {
var navibg = document.getElementsByName("nbg");
   if (n == 0) {
      navibg[0].style.background = "url(img/bg_navi.jpg)";
      navibg[1].style.background = "url(img/img_11.jpg)";
      navibg[2].style.background = "url(img/img_13.jpg)";
   } else {      
      navibg[0].style.background = "url(img/bg_navi_mo.jpg)";
      navibg[1].style.background = "url(img/bg_navi_mo.jpg)";
      navibg[2].style.background = "url(img/bg_navi_mo.jpg)";
   }
}

+ entsprechende name + entsprechende onMouseOver &-Out ...

Eine nebensächlichere Frage habe ich allerdings noch:
Kann man mit CSS Mouseover-Bilder vorladen?
Wenn ja, wie?

Lg