2-Wege-Rollover-.Effekt

[franny]

Hallo,

ich bastle gerade an einer Navigation, bei der beim hover von Links ein Rollover-Effekt bei auf der Seite eingebundenen Bildern erscheint. Das ganze klappt bisher auch ganz gut, ich habe es mit JavaScript umgesetzt:

<script language="JavaScript">
<!--
current1 = new Image();
current1.src = "pic01_off.jpg";
over1 = new Image();
over1.src = "pic01.jpg";

current2 = new Image();
current2.src = "pic02_off.jpg";
over2 = new Image();
over2.src = "pic02.jpg";

function over(imgID,imgObjName) {
 document.images[imgID].src = eval(imgObjName + ".src")
}

Die Navigation sieht wie folgt aus:

<LI><a href="#" onmouseover="over('bild1','over1');" onmouseout="over('bild1','current1')"><img src="pic01_off.jpg" alt="" width="123" height="90" border="0" id="bild1"></a>
<LI><a href="#" onmouseover="over('bild1','over1');" onmouseout="over('bild2','current2')"><img src="pic02_off.jpg" alt="" width="123" height="90" border="0" id="bild2"></a>

Die Bilder sind in einer Tabelle eingebunden:
<TD><a href="#" onmouseover="over('bild1','over1');" onmouseout="over('bild1','current1')"><img src="pic01_off.jpg" width="120" height="90" border="0" id="bild1"></a></TD>
<TD><a href="#" onmouseover="over('bild2','over2');" onmouseout="over('bild2','current2')"><img src="pic02_off.jpg" width="120" height="90" border="0" id="bild2"></a></TD>

Wenn ich also jetzt mit der Maus über einen Navigationspunkt fahre, verändert sich -wie gewünscht- das dazugehörige Bild.

Nun hätte ich aber gerne, daß sich beim Überfahren des Bildes auch die Farbe des dazugehörenden Links verändert. Irgendwie stehe ich nun völlig auf dem Schlauch, ich habe partout keine Ahnung, wie das zu realisieren ist.

Kann mir da jemand weiterhelfen???

[Felix Riesterer]

Liebe franny,

Nun hätte ich aber gerne, daß sich beim Überfahren des Bildes auch die Farbe des dazugehörenden Links verändert. Irgendwie stehe ich nun völlig auf dem Schlauch, ich habe partout keine Ahnung, wie das zu realisieren ist.

das wäre doch ein Standardfall für den Einsatz von CSS, oder?

In Javascript geht das natürlich auch, wenngleich etwas umständlicher. Du könntest entweder Deine over-Funktion erweitern, oder eine zweite Funktion schreiben, die nur die Links behandelt. In beiden Fällen müsstest Du aus dem Eventhandler den Parameter "this" übergeben, damit die aufgerufene Funktion weiß, um welches HTML-Element es sich handelt (Deine over-Funktion bekommt stattdessen ja die ID des zu ändernden Bildes).

Aber auch eine Javascript-Funktion würde lediglich lokal an den CSS-Eigenschaften des jeweiligen Links fummeln. Warum dann nicht gleich eine Lösung wie z.B. das hier? a:hover { color: #123456; }

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[franny]

Hallo Felix,

ich steh glaub ich immer noch auf dem Schlauch...

Ich habe eine Tabelle mit der Navigationsleiste und eine andere Tabelle mit Bildern. Wenn ich mit der Maus über einen Link fahre, ändert sich das zum Link gehörende Bild (die Tabelle mit den Bildern befindet sich außerhalb der Navigationsleiste).

Nun soll es auch umgekehrt funktionieren - wenn ich mit der Maus übers Bild fahre, soll sich die Linkfarbe des zum Bild gehörenden Navigationselements verändern.

Wenn ich einfach nur a:hover { color: #123456; } verwende, ändert sich ja nur die Linkfarbe des jeweils "überfahrenen" Links. Da ich um die Bilder keinen Rahmen habe, bleibt also sogar gar kein Effekt.

Irgendwie fehlt die Zuordnung zwischen Bild und Link, und ich weiß nicht, wie ich die mit CSS hinbekomme - das Thema ist mir ziemlich fremd...

Trotzdem schon mal vielen Dank für Deine Hilfe

Gruß

Franny

[Felix Riesterer]

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.