rollover effekct für grafiklinks

[Martin L.]

Moin Moin

ich habe hier grafiklinks in meiner Homepage und ich würde die gerne durch einen rollover effeckt austaschen also grafik1 soll bei mauskontakt in grafik2 umgewandelt wird....

das kann man sicherlich ganz fein mit javascript machen aber das kann man ja abschalten und deshalb wüsste ich gerne ob das auch mit css möglich ist ich mein es gibt ja a:hover nur hab ich das noch nicht wirklich verstanden (hab mich aber auch wenig damit befasst)

ich will nur wissen ob das möglich ist oder nicht....

danke sehr

[Gunnar Bittersmann]

Hello out there!

also grafik1 soll bei mauskontakt in grafik2 umgewandelt wird....

ich will nur wissen ob das möglich ist oder nicht....

Ja, das ist es.

See ya up the road,
Gunnar

[Martin L.]

ok gut das es geht...

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?.... weil ansonsten weiß ich gerade nicht wie ich einem button ein hintergrundbild geben soll?...

[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

[Gunnar Bittersmann]

Hello out there!

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.

Dumm nur, dass man ohne CSS dann nichts sieht.

Deshalb würd ich einen Hover-Effekt nicht mit CSS, sondern mit JavaScript machen. Ohne JavaScript kein Effekt – na und? Dafür ist auf jeden Fall die Benutzbarkeit der Seite sichergestellt.

Ingo Turski hat den Bildwechsel mit CSS mal ganz anders realisiert: eine Grafik, die beide Teile enthält und über 'background-position' verschoben wird.

Manko bei seiner Lösung: Ohne Bildanzeige aber mit CSS verschwindet der Alternativtext beim Hover. Noch unschöner. Wie gesagt: Ich würd’s mit JavaScript machen.

See ya up the road,
Gunnar

[Gernot Back]

Hallo Martin,

das kann man sicherlich ganz fein mit javascript machen aber das kann man ja abschalten und deshalb wüsste ich gerne ob das auch mit css möglich ist ich mein es gibt ja a:hover nur hab ich das noch nicht wirklich verstanden (hab mich aber auch wenig damit befasst)

CSS kann man auch abschalten, kommt aber nicht so häufig vor. Ja dann verpass deinem Link doch einfach die Grafik als Hintergrundbild und tausch sie bei Hover aus...

Ach ja die Sanduhr und das Flackern im IE vergaß ich: Nimm also ein Hintergrundbild für den Link, schachtele darein ein SPAN-Element und blende das Hoverbild nur bei Hover im Span-Kindelement ein. Was tut man nicht alles für den armen kranken Lieblingsbrowser?

Gruß Gernot