Platzhalter anstelle von Linktext!?

[Peter]

Schönen Abend!

Ich habe bei meiner Webseite einige Links erstellt, die zwangshalber aus Grafiken bestehen. Die Grafiken sind also anstelle des Linktextes (der Text steht ja auf den Grafiken.)

Nun würde ich jedoch gerne mittels CSS einen "Bildertausch" durchführen.
(Über das :hover Pseudoelement von a bzw. der background-image Eigenschaft). Allerdings wird dieser, so wie ich den Code jetzt habe nicht durchgeführt. Bisher sieht der Code so aus (HTML u. CSS Code):

[code:lang=html]
 <a href="#" id="link"><img src="bild1.gif" style="border:none; width:20px; height:50px;" alt="Link 1" title="Link 1" /></a>
[/code]

[code:lang=css]
 a#link:link, a#link:visited {
  background:url(bild1.gif) no-repeat;
 }
 a#link:hover, a#link:active {
  background:url(bild1h.gif) no-repeat;
 }
[/code]

Nun wird dieser Bildertausch meiner Meinung nach nicht durchgeführt, da der Link selbst aus dem bild1.gif besteht und sich somit über den Hintergrund (der sich ändert) drüberlegt.

Als test habe ich nun das img-Tag im Link entfernt. Allerdings wird mir nun der Hintergrund nicht mehr vollständig angezeigt, da das Link-Element nun keinen Inhalt besitzt. Meine Frage daher: gibt es soetwas wie einen Platzhalter, der mir das Link-Element auf die Größe des Hintergrundbildes "dehnt"?

Schöne Grüße
 Peter

[Mel]

Hallo,

eine Möglichkeit wäre z.b. dass Du transparente gifs benutzt. Dann sieht man den jeweiligen HIntergrund.
Was Deine Css-Technik betrifft so würde ich Dir zu einem anderen Vorgehen raten.

Tausche nicht das Hintergrundbild aus (ergibt Flackern, v.a. im IE)sondern speichere beide Hintergründe als EIN Bild ab. dieses verschiebst Du dann mittels background-position.

Es gibt noch weitere Möglichkeiten Dein Problem zu lösen.
z.b. indem Du das a-Element als block-Element definierst und damit Höhe und Breite (oder Innen- und Aussenabstände) zuweist. Und natürlich das Hintergrundbild. Den enthaltenen Text kannst Du dann in ein span packen und mit CSS "verstecken" z.b. indem Du es mit position: absolute; top: -3000px; left: 0; aus dem sichtbaren Bereich herausschiebst.
Diese Methode scheint zwar recht elegant zu sein und ist auch sehr beliebt hat aber den Nachteil dass Browser welche Bilder nicht anzeigen überhaupt keine Navi-infos bereithalten.

Ingo hat einen interesanten Ansatz übrigens gefunden:
http://www.1ngo.de/web/bildwechsel.html

vg mel

Im Linkelement selbst

[ShiNtoKu]

Hallo,

Ingo hat einen interesanten Ansatz übrigens gefunden:
http://www.1ngo.de/web/bildwechsel.html

Dem auch nichts mehr hinzuzufügen ist ;)

Viele Grüße
Patrick