Remote Linking

Remote Linking nenne ich es, wenn ein einzelner Ankerlink mehrere klickbare Bereiche an verschiedenen Stellen hat. Es kann für ziemlich coole Effekte verwendet werden und erfordert nichts als CSS.

Es ist keine brandneue Idee und tatsächlich habe ich es schon einmal behandelt, aber ich dachte, ich würde ein 'realeres' Beispiel für euch alle zusammenstellen.

Demo anzeigen   Dateien herunterladen

 

Wie man es macht

Viel ist nicht dazu nötig, packen Sie einfach alles, was Teil des rollbaren Bereichs sein soll, in einen einzigen Ankerlink. So:

<a href="#toby" id="toby">
	<span class="name">Toby Yong</span><br />
	Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.
	<img src="images/blog-toby_young_0.jpg" alt="Toby Pic" class="photo" />
</a>

Wir haben nun alle nötigen Hooks, um die verschiedenen Teile anzusprechen und das zu tun, was wir tun müssen. Natürlich wenden wir einige Stile und Positionierung auf den Text an, aber wichtiger ist, dass wir das Bild selbst ansprechen und es mit absoluter Positionierung herausziehen.

Hier ist die gesamte beteiligte CSS

.people		{ position: relative; } 
a			{ text-decoration: none; color: #222; display: block;
	 		  margin: 0 0 0 270px; outline: none; padding: 5px; }
a img			{ border: 1px solid #ccc; display: block; position: absolute; }
a:hover		{ background: #ffefcd; }
a .name		{ font: 18px Georgia, Serif; }
a:hover .name		{ color: #900; font-weight: bold; } 
a:hover img		{ border: 5px solid #222; margin: -4px; }
#toby img   		{ top: 0; left: 0; }
#tom img		{ top: 0; left: 134px; }
#gail img		{ top: 134px; left: 0; }
#padma img		{ top: 134px; left: 134px; }

Bilder und Text aus dem Beispiel stammen von Bravos Top Chef.