nicht angemeldet
Liebe franny,
Irgendwie fehlt die Zuordnung zwischen Bild und Link, und ich weiß nicht, wie ich die mit CSS hinbekomme - das Thema ist mir ziemlich fremd...
die bekommst Du mit CSS nicht hin, es sei denn Du hast im HTML-Code einen Zusammenhang (Verschachtelung) hergestellt. Dann kannst Du mit den entsprechenden Selektoren in CSS Deinen Zusammenhang herstellen.
In Deinem Fall ist das Bild innerhalb des Links notiert. Damit kannst Du es als Kindelement über einen Nachfahrenselektor erreichen.
/* Das Link-Element selbst im Hoverzustand */
a:hover {
color: 123456;
}
/* ein Bild im Link-im-Hoverzustand */
a:hover img {
border: 5px solid red;
}
Da Du aber schreibst:
(die Tabelle mit den Bildern befindet sich außerhalb der Navigationsleiste)
sehe ich keine Möglichkeit, über CSS das von Dir Gewünschte zu erreichen.
Wenn es denn unbedingt sein muss, dann wird Dir nichts anderes übrig bleiben, als jedem Link eine passende ID zu verpassen, sodass Du über Link-ID und Bild-ID einen Zusammenhang in Javascript herstellen kannst.
Beispiel in HTML:
<!-- Navigation in einem eigenen DIV-Element -->
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a id="link-ho" href="index.html" onmouseover="hover(this.id)" onmouseout="hover(this.id)">Home</a></li>
<li><a id="link-im" href="impressum.html" onmouseover="hover(this.id)" onmouseout="hover(this.id)">Impressum</a></li>
<li><a id="link-gb" href="gaestebuch/index.html" onmouseover="hover(this.id)" onmouseout="hover(this.id)">Gästebuch</a></li>
</ul>
</div>
<!-- Bildergalerie in einer Tabelle -->
<table class="bildergalerie">
<tr>
<th>Aufnahme</th><th>Erläuterung</th>
</tr>
<tr>
<td><img id="bild-ho" src="bild1.jpg" alt="" onmouseover="hover(this.id)" onmouseout="hover(this.id)" /></td><td>Photo für den Home-Link</td>
</tr>
<tr>
<td><img id="bild-im" src="bild2.jpg" alt="" onmouseover="hover(this.id)" onmouseout="hover(this.id)" /></td><td>Photo für den Impressumslink</td>
</tr>
<tr>
<td><img id="bild-gb" src="bild3.jpg" alt="" onmouseover="hover(this.id)" onmouseout="hover(this.id)" /></td><td>Photo für den Link zum Gästebuch</td>
</tr>
</table>
Deine Javascript-Funktion muss dann nur noch "wissen", welches Bild sie ersatzweise für das aktuelle anzeigen soll. Über die an die hover-Funktion übermittelte ID kannst Du ja schnell erkennen, ob der Mauszeiger über einem Link, oder über einem Bild war. Anhand der Übereinstimmungen von Bilder- und Link-IDs kannst Du ja schnell von "bild-ho" auf "link-ho" schließen und umgekehrt.
Dir eine solche Javascript-Funktion zu schreiben, habe ich jetzt aber wirklich weder Lust noch Zeit. Das kriegste selber hin, oder?
Liebe Grüße aus Ellwangen,
Felix Riesterer.