Link-Text mit CSS durch Grafik ersetzen?

[Felix Riesterer]

Liebe Selfer,

ich möchte einen Linktext durch eine anklickbare Grafik ersetzen. Nach Möglichkeit sollte das mit reinem CSS gelingen.

Beispiel:
<p id="abc">Lorem ipsum dolor sit amet. <a href="#">Bild</a></p>

"Bild" innerhalb von <a></a> soll nun durch eine Grafik ersetzt werden.

Mein Ansatz, der noch nicht zum gewünschten Ergebnis führt, war bisher dieser:

p#abc a { visibility: hidden; background: url(pfad/zum/bild) no-repeat; }

Durch das "visibility: hidden" wird der komplette Link aber ausgeblendet und dadurch unbenutzbar. Das dem Link verpasste Hintergrundbild ist ebenso unsichtbar (weil eben "hidden"). Auch Experimente mit a:before führen in die Wüste, da "hidden" eben "hidden" ist. Ohne "hidden" sieht man aber den Linktext ("Bild")...

Muss ich auf Javascript umsteigen, oder gibt es doch eine reine CSS-Lösung für mein Vorhaben?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Martin Hölter]

Hi!

du suchst fahrner image replacement.

Gruß aus Iserlohn

Martin

[Felix Riesterer]

Lieber Martin,

du suchst fahrner image replacement.

Danke für die schnelle Antwort! Werde mir das mal zu Gemüte ziehen. So ganz unproblematisch scheint es auf den ersten Blick eh nicht zu sein...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Lieber Martin,

du suchst fahrner image replacement.

Die vorgestellten Techniken sind für mich alle wertlos, da sie - wenn denn das Ergebnis einigermaßen wie gewünscht ausfällt - den Link unbrauchbar werden lassen.

Ich probier's noch ein Bisschen weiter. Sollte es zu nix führen, dann lass ich's einfach sein. War eh' nur ein Gimmick. Vielleicht nehme ich noch ein JS zuhilfe, aber das ist mir eigentlich zuwider... Mal sehen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Liebe Selfer,

Beispiel:
<p id="abc">Lorem ipsum dolor sit amet. <a href="#">Bild</a></p>

"Bild" innerhalb von <a></a> soll nun durch eine Grafik ersetzt werden.

Mein Ansatz, der noch nicht zum gewünschten Ergebnis führt, war bisher dieser:

p#abc a { visibility: hidden; background: url(pfad/zum/bild) no-repeat; }

Meine Lösung ist diese:
p#abc a { display: block; width: 0; background: url(pfad/zum/bild) no-repeat; padding-left: 16px; overflow: hidden; }

Da der Link als Block-Element angezeigt wird, kann ich ihm eine Breite von Null geben. Damit die Hintergrundgrafik angezeigt wird, muss ich ihre Breite als padding-left definieren (in meinem Beispiel 16px), damit der Linktext "Platz macht". Dadurch wird die Hintergrundgrafik anklickbar, obwohl vom eigentlichen Link nix mehr zu sehen ist (dank overflow:hidden). Voilà.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Auge]

Hallo

Meine Lösung ist diese:
p#abc a { display: block; width: 0; background: url(pfad/zum/bild) no-repeat; padding-left: 16px; overflow: hidden; }

Da der Link als Block-Element angezeigt wird, kann ich ihm eine Breite von Null geben. Damit die Hintergrundgrafik angezeigt wird, muss ich ihre Breite als padding-left definieren (in meinem Beispiel 16px), damit der Linktext "Platz macht". Dadurch wird die Hintergrundgrafik anklickbar, obwohl vom eigentlichen Link nix mehr zu sehen ist (dank overflow:hidden). Voilà.

Beim Stöbern durch die von Martin verlinkten Suchergebnisse fiel mir auch folgender Link auf: http://wellstyled.com/css-replace-text-by-image.html, der vom Suchergebnis des Stopdesign Artikels aus erreichbar ist.

Dort wird der Text in das eigentliche Element notiert und ein leeres <span></span> bekommt einerseits das Bild zugewiesen und wird andererseits _über_ den Text platziert.

Dortiges Beispiel, bezogen auf eine Überschrift:

  
   #chapter-one {  
      margin:0; padding:0;  
      position:relative;  
      width:200px; height:80px;  
      margin:0; padding:0;  
      overflow:hidden;  
      }  
   #chapter-one span {  
      display:block;  
      position:absolute; left:0; top:0; z-index:1;  
      width:200px; height:80px;  
      margin:0; padding:0;  
      background:url("chapter-one.gif") top left no-repeat;  
      }  

<h2 id="chapter-one">Chapter One<span></span></h2>

Diese Idee gefällt mir auch ganz gut.

Tschö, Auge

[Felix Riesterer]

Liebes Auge,

ich will aber kein zusätzliches HTML-Element in den Quelltext setzen, da dieser unverändert bleiben soll! Wozu verwende ich denn CSS mit Selektoren, wenn ich dann doch wieder extra ein neues, semantisch nicht wirklich notwendiges Element "einpflanzen" muss?

Da erscheint mir meine Lösung (die ich nicht mit Hilfe einer ID im <p>, sondern mit Hilfe einer Klasse in einem <div> realisiert habe) wesentlich einfacher und zudem auch erheblich kürzer.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[CarstenP]

Hallo Felix,

ich will aber kein zusätzliches HTML-Element in den Quelltext setzen, da dieser unverändert bleiben soll! Wozu verwende ich denn CSS mit Selektoren, wenn ich dann doch wieder extra ein neues, semantisch nicht wirklich notwendiges Element "einpflanzen" muss?

Das Hauptproblem der meisten Image-Replacement-Techniken ist, daß der normale Text nicht sichtbar ist, wenn der Browser zwar das CSS interpretiert, die Bilder aber aus welchen Gründen auch immer nicht geladen werden (z.B. Opera mit deaktivierten Bildern), so auch bei Deiner Lösung. Daher verwendet der von Auge verlinkte Ansatz ein zusätzliches Element, damit Text und Bild getrennt voneinander behandelt werden können.

Ich habe mich mal ein bißchen daran versucht, das Beispiel 3 aus dem von Auge verlinkten Artikel http://wellstyled.com/css-replace-text-by-image.html so weit anzupassen, daß auch hier der Text sichtbar bleibt, wenn die Bilder nicht geladen werden.

Der folgende Code funktioniert in Mozilla und Opera. Ohne Bilder wird der Linktext angezeigt, mit Bildern hat man einen grafischen Link mit Hover-Zustand (online unter http://www.carsten-protsch.de/selfforum/testcases/image-replacement/):

CSS:

  
li {  
  position:relative;  
  width:100px;  
  height:40px;  
  border:solid 1px #000;  
}  
li a span {  
  position:absolute; left:0; top:0; z-index:1;  
  width:100%; height:100%;  
  background:url("bild.png") top left no-repeat;  
  cursor:pointer; /* nur für IE nötig */  
}  
li a:hover span {  
  background: url("bild.png") 0 -40px;  
}  

HTML:

<ul>  
  <li><a href="http://www.example.com/">Linktext<span></span></a></li>  
  <li><a href="http://www.example.com/">Linktext<span></span></a></li>  
  <li><a href="http://www.example.com/">Linktext<span></span></a></li>  
</ul>  

Das Problem im IE: Er kehrt aus dem Hover-Zustand nicht mehr in den Grundzustand zurück. Weiß irgendjemand, wie man dieses Problem im IE beheben könnte?

Der Idealfall wäre natürlich, daß das Bild auch im IE wieder in den Normalzustand zurückspringt. Falls es keine Lösung gibt, könnte man das :hover natürlich auf span wirken lassen, so daß das Bild im IE gar nicht erst in den Hover-Zustand übergeht...

Hier gibt es überbrigens eine Übersicht über diverse Image-Replacement-Methoden: < http://meiert.com/de/releases/20050513/>

Viele Grüße
Carsten

[Felix Riesterer]

Lieber Carsten,

Das Hauptproblem der meisten Image-Replacement-Techniken ist, daß der normale Text nicht sichtbar ist, wenn der Browser zwar das CSS interpretiert, die Bilder aber aus welchen Gründen auch immer nicht geladen werden (z.B. Opera mit deaktivierten Bildern), so auch bei Deiner Lösung.

Das ist wahr! Da werde ich mein Vorhaben mal schnell wieder aufgeben und das Feature aus meiner Seite herausnehmen. _Das_ ist mir die Sache nicht wert! Und wenn ich dazu nun doch ein weiteres HTML-Element benötige, dann lasse ich es lieber sein. Wozu auch!?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[CarstenP]

Hallo Felix,

Wozu auch!?

Naja, an und für sich wäre es ja eine schöne Sache: So könnte man z.B. Navigationsmenüs oder Überschriften graphisch gestalten, ohne daß man bei einem Redesign der Seiten den HTML-Quelltext anfassen müßte, um die Bilder auszutauschen.
Oder auf gut deutsch: Es wäre eine konsequente Trennung von Inhalt und Layout: Die Beschriftung ist nach wie vor im HTML-Quelltext enthalten, die Gestaltung der Beschriftung übernimmt CSS.

Viele Grüße
Carsten

[Detlef G.]

Hallo Carsten

Das Problem im IE: Er kehrt aus dem Hover-Zustand nicht mehr in den Grundzustand zurück. Weiß irgendjemand, wie man dieses Problem im IE beheben könnte?

Gib ihm noch etwas am a selbst zu hovern, außer dem span. Es muss noch
nichteinmal das Aussehen verändern.
z.B.

  
li a {  
  color:#000;  
}  
li a:hover {  
  color:#000000;  
}  

Auf Wiederlesen
Detlef

[CarstenP]

Hallo Detlef,

Das Problem im IE: Er kehrt aus dem Hover-Zustand nicht mehr in den Grundzustand zurück. Weiß irgendjemand, wie man dieses Problem im IE beheben könnte?

Gib ihm noch etwas am a selbst zu hovern, außer dem span. Es muss noch
nichteinmal das Aussehen verändern.

Danke für den Hinweis, darauf muß man erstmal kommen...

Ich hatte gestern noch über Ingos Infoboxen und Eric Meyers Pure CSS Popups gebrütet, die ja im Prinzip ähnlich funktionieren. Aber ich bin nicht dahintergekommen, warum sie funktionieren, der Hover-Effekt beim Image-Replacement aber nicht. Ingo und Eric haben beide sowieso Hover-Effekte für ihre "Links", so daß sie beide bei der Erstellung der Beschreibungen wahrscheinlich gar nicht geahnt haben,  daß diese Hover-Effekte für die Funktionsweise ihrer Popups unbedingt nötig sind (zumindest geht es aus ihren Erklärungen nicht hervor, daß sie es wissen ;-) ). Und ich hab daher auch nicht im entferntesten daran gedacht, noch den Hover-Effekt für den Link an sich einzubauen...

Lange Rede, kurzer Sinn: Jetzt funktioniert es. Danke!

Über einen "Bug-Report" zu Eric Meyers Popups bin ich mittlerweile auch gestolpert: http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp. Eine E-Mail an Ingo, daß er einen entsprechenden Hinweis in seinen Tip mit aufnehmen sollte, werde ich noch losschicken.

Viele Grüße
Carsten

[Ingo Turski]

Hi,

Ingo und Eric haben beide sowieso Hover-Effekte für ihre "Links", so daß sie beide bei der Erstellung der Beschreibungen wahrscheinlich gar nicht geahnt haben,  daß diese Hover-Effekte für die Funktionsweise ihrer Popups unbedingt nötig sind (zumindest geht es aus ihren Erklärungen nicht hervor, daß sie es wissen ;-) ).

Doch, geahnt bzw. gewußt habe ich das schon. Aber wenn Du die für a.infobox:hover Eigenschaften cursor:help; color:#c30; background:white; _alle_ entfernst, dann klappt das Beispiel natürlich nicht mehr. Selbst cursor:help reichte aus, um den IE anzuschubsen.
Ich habe aber jetzt mal einen Hinweis eingefügt für die Leute, die etwas gegen Hover-Effekte haben. ;-)

freundliche Grüße
Ingo