Was ist Remote Linking?
Remote Linking ist ein Rollover, der ein anderes Objekt auf der Seite beeinflusst. Der Rollover kann auch sich selbst beeinflussen. Dies kann mit REINEM CSS erfolgen, was es zu einer sehr coolen und leichten Technik macht.
In diesem Beispiel sehen Sie eine Reihe von farbigen Kreisen nebeneinander und darunter eine Liste ihrer Namen. Wenn Sie über den Kreis fahren, wird sowohl der Kreis als auch der Name hervorgehoben. Ebenso wird beim Überfahren des Namens sowohl der Kreis als auch der Name hervorgehoben.
Sie können sehen, dass der Code nur eine sehr einfache unsortierte Liste mit eindeutigen IDs für jedes Listenelement ist. Natürlich wird CSS3 dies einfacher machen und die Notwendigkeit von eindeutigen IDs beseitigen, aber das ist eine andere Geschichte...
<ul>
<li id="red"><a href="#"><em>Red</em></a></li>
<li id="yellow"><a href="#"><em>Yellow</em></a></li>
<li id="orange"><a href="#"><em>Orange</em></a></li>
<li id="green"><a href="#"><em>Green</em></a></li>
<li id="blue"><a href="#"><em>Blue</em></a></li>
</ul>Dann geben Sie den Listenelementen einige generische Informationen zu Größe und Positionierung. Jedes spezifische Listenelement erhält zusätzliche Informationen über das Hintergrundbild und die Platzierung des em.
ul li a {
width: 100px;
height: 100px;
display: block;
}
ul li a em {
position: relative;
}
ul li#red a {
background: url(images/red.gif) bottom center no-repeat;
}
ul li#red a:hover {
background-position: top center;
}
ul li#red a em {
top: 150px;
}Der eigentliche Trick hier ist, dem em innerhalb des Ankers eine relative Positionierung zu geben und es dann mit Top/Bottom/Left/Right-Koordinaten zu verschieben. Dadurch bleibt alles innerhalb eines einzigen Anker-Elements, weshalb der Rollover automatisch auf beide Elemente wirkt. Ich liebe diese Technik, sie macht mich ganz aufgeregt. =)
Neulich, nachdem ich Ihren Beitrag „Links of Interest“ gelesen hatte, sah ich das Video von Doug Bowman, Beauty of CSS. Er sprach über diese Remote Rollovers, ich fand sie großartig und beschloss, heute etwas zu recherchieren.
Und da ich Ihren RSS-Feed abonniert habe, habe ich Ihr Beispiel gesehen.
Es ist großartig, vielen Dank, Ihre Tutorials sind sehr einfach zu verstehen und sehr geradlinig.
Mit freundlichen Grüßen
Ich möchte eine Anregung zu Ihrem CSS machen;
Anstatt zu schreiben
ul li#blue a {}
ul li#blue a:hover {}
ul li#blue a em {}
Sie können schreiben als
#blue a {}
#blue a:hover {}
#blue a em {}
Mit freundlichen Grüßen
@Volkan: Yep, genau daher habe ich die Idee für diesen Beitrag. Ich dachte, das sieht wirklich gut aus und hatte so etwas noch nie zuvor versucht. Außerdem klingt Ihr CSS-Vorschlag solide und würde ihn etwas erleichtern – schaden kann es nicht.
mmm, sehr schön in der Tat. Habe mir gerade den Code angesehen, er ist sehr sauber und clever und doch sehr einfach.
Ich bin jedoch etwas ratlos, wofür man die Technik verwenden würde. Gibt es nützliche Ideen?
In dem Video, aus dem ich diese Idee hatte, hat Doug Bowman sie auf sehr coole Weise genutzt. Er hatte die Fotos mehrerer Personen in Schwarzweiß horizontal aufgereiht und ihre Namen darunter in einer Liste aufgeführt. Wenn Sie mit der Maus über die Fotos fuhren, wurden diese farbig und ihre Namen hervorgehoben.
Er nutzte sie auch auf eine noch interessantere Weise. Er hatte einen Link in seiner Fußzeile zu dem Hosting-Anbieter, den er nutzte. Denselben Link wollte er auch in der oberen rechten Ecke seiner Seite haben. Also legte er ein em-Element in diesen Link und gab dem em eine absolute Positionierung, die es in die obere rechte Ecke brachte. Derselbe Link, zwei Stellen. Es war sehr cool und es hilft auch, Ihre Seite leichter zu halten.
Ich habe ein einfaches Stück Code vorgeschlagen
a {
outline:none;
}
Andernfalls haben wir einen großen hässlichen Umrandungsrahmen, wenn wir auf die Ballons klicken.
Wenn Sie also denselben Link zweimal auf der Seite haben, könnte es nützlich sein, diese Funktion zu nutzen??
@Oriol: Ja! Das ist ein großartiger Vorschlag. Ich habe mich ehrlich gesagt schon immer gefragt, ob es einen Weg gibt, diese dummen Linien loszuwerden. Besonders bei schwebenden Objekten sind sie wirklich hässlich. Ich war einfach völlig unwissend über diese CSS-Eigenschaft.
@Jermayn: Das ist im Grunde das Ding. Aber es ist in Situationen, in denen Sie möchten, dass beide Links dasselbe tun, wo es am nützlichsten ist, nicht nur, dass es derselbe Link ist. Tatsächlich könnte diese Technik funktionieren, um dasselbe Anker-Element zur Steuerung von 3, 4, 5, wirklich unbegrenzt vielen Objekten auf der Seite zu verwenden.
Hallo Chris,
Ich habe diese Technik in einem meiner Projekte verwendet. Und ich hatte eine Anregung für eine leichtere CSS-Datei.
Da die Werte für Hintergrundposition und Wiederholung für jedes a und a:hover gleich sind, können wir sie gruppieren als
ul li a {
background-position:bottom center;
background-repeat:no-repeat;
}
ul li a:hover {
background-position:top center;
}
und wir können unseren Code ändern zu
ul li#red a {
background-image: url(images/red.gif)
}
ul li#red a em {
top: 150px;
}
Der Unterschied ist 1,50 KB werden zu 1,32 KB :D
Übrigens,
Wenn ich das Beispiel herunterlade, fehlt der öffnende HTML-Tag.
Und das Link-Tag sollte nach dem aktuellen Schema nicht selbst geschlossen werden.
Schließlich zeigt IE6 Ihren POSTComment-Button nicht an (vielleicht zumindest bei mir)
@Volkan: Beide Ihre Ideen zu diesem Beispiel waren genau richtig. So nutzen Sie wirklich den Kaskadierenden Teil von CSS, um Dinge leicht zu halten. Danke, dass Sie auf den fehlenden HTML-Tag hingewiesen haben, ich habe ihn auf der Seite und im Download behoben.
Was den Button in IE betrifft... ich bin nicht allzu besorgt darüber, es ist ein schöner kleiner Bonus für die Verwendung von Firefox, nehme ich an. Sie bekommen ihn auch nicht in Safari wegen der Standardbuttons, die Safari verwendet.