rollover effekct für grafiklinks

[Gernot Back]

Hallo Martin,

was heißt als hintergrundbild ich hab da momentan

<a href="http://www.dieseite.de"><img class="btn" alt="Home" src="bilder/btn/btn_home.gif"/></a>

soweit so gut was heißt jetz "als hintergrund" und wie tausche ich das  aus? muss ich dann den link als eigenes div element deklarieren für einen hintergrund?

Wenn du möchtest, dass ein Link exakt die Ausmaße eines Bildes erhält, dem du über die background-Eigenschaft(en) dann auch eine entsprechende Hintergrundgrafik verpassen kannst, musst du dem Inline-Element (A) tatsächlich zuerst sagen, dass es sich wie ein Blockelement verhalten soll. Das kannst du über display:block oder auch indirekt, indem du es z.B. floaten lässt. Nur dann nimmt in vernünftigen Browsern der Link auch eine Height-Angabe an.

.... weil ansonsten weiß ich gerade nicht wie ich einem button ein hintergrundbild geben soll?...

Das mit CSS augespannte A-Element kann komplett leer bleiben oder seinerseits nur ein entsprechend-präpariertes Span-Element enthalten, um z.B. dem Flackerbug beim IE zu begegenen:

  
  
a.meinBild {  
   background:url(meinNormalBild.gif) no-repeat;  
   width:100px;  
   height:20px;  
   float:right;  
}  
  
a.meinBild span {  
   background:url(meinNormalBild.gif) no-repeat;  
   width:100px;  
   height:20px;  
   float:right;  
}  
  
a.meinBild:hover span {  
   background-image:url(meinRollOverBild.gif);  
}  

Ansonsten könntest du den Link auch mit einem transparenten Vordergrundbild entsprechend aufspannen, was aufgrund des dann dort unterzubringenden ALT-Textes vielleicht nicht die schlechteste Variante wäre, wenn Bilder in einem Ausgabemedium nicht dargestellt werden. Dann bleibt der Link auch schön auf einer Zeile und ggf. auch mitten im Text.

  
    <a class="meinBild" href="#einAnker"><img src="transparent.gif" alt="Dr&uuml;ck mich!" title="" /></a>  

  
a.meinBild {  
   background:url(meinRollOverBild.gif) no-repeat;  
}  
  
a.meinBild img {  
   background:url(meinNormalBild.gif) no-repeat;  
   width:100px;  
   height:20px;  
}  
  
a.meinBild:hover img {  
   background-image:url(meinRollOverBild.gif);  
}  

Gruß Gernot