# Bei Hover Grafik hinter Link ändern mit CSS



## MasterGeo (8. September 2005)

Hi,

ich habe ein Textlink und dahinter ist eine Grafik. Bei einem Mouseover soll sich die Grafik hinter dem Link ändern. Am liebsten wäre mir, wenn sich die Grafik dahinter automatisch per CSS hinzaubert.

Gruß Georg


----------



## Inspector (8. September 2005)

Hi,

Inhalte lassen sich mit css nicht ändern, nur anders darstellen. Es gäbe da jedoch einen Trick, wie man sich behelfen könnte: Der Inhalt im html ist ein leeres transparentes gif, das per width und height auf die benötigte Größe aufgebläht wird. Das eigentliche Bild wird per css als Hiintergrundbild (background-image) eingebunden. Die Bildumschaltung geht dann mit der :hover Pseudoklasse.

Damit kannst Du auch gleich noch ein Problem umschiffen, das der IE mit :hover hat. Der kann das nämlich ausschließlich auf Links anwenden. Also weist Du dem Textlink das Hintergrundbild zu, das dann natürlich links von eigentlichen Bild einen passend großen leeren transparenten Bereich haben muß, auf dem der Text dann liegt.

Allerdings hatte ich, auch wieder mit dem IE, Probleme, einem Link per css die benötigte Höhe und Breite zuzuweisen. Das Hintergrundbild wurde im IE immer nur so groß gemacht wie der Text, egal, wie groß der Platz für den Link tatsächlich war. Behelfen kannst Du Dich hier wiederum, indem Du einen button verwendest:

```
<a href="...">
    <button type="button" onclick="self.location.href='...'">Linktext</button>
</a>
```
Das wird vom IE einwandfrei gerendert, mit passender Größe und Allem. Die JavaScript Navi ist auch wiederum nur nötig, um einen Fehler des IE auszugleichen: Der weigert sich nämlich, einen Link auszuführen, wenn dieser einen Button enthält. Er zeigt das Ziel zwar in der Statuszeile an, aber er tut's nicht. Diese Art der Navigation funktioniert mit dem IE also nur, wenn JavaScript eingeschaltet ist.

Der Konqueror rendert das übrigens nicht besonders doll, er setzt den Text zu hoch auf das Hintergrundbild. Und Opera hat anscheinend Probleme damit, transparente Bereiche des Hintergrundbildes auch tatsächlich transparent zu lassen.

Leider weiß ich per css keine bessere Möglichkeit, die mit allen Browsern gut funktioniert.


----------



## MasterGeo (8. September 2005)

Ok Danke, damit komme ich schon mal weiter.


----------



## Gumbo (8. September 2005)

> Inhalte lassen sich mit css nicht ändern, nur anders darstellen.


Nicht ganz: siehe content-Eigenschaft.



> Allerdings hatte ich, auch wieder mit dem IE, Probleme, einem Link per css die benötigte Höhe und Breite zuzuweisen.


Nur Elementen mit Block-Level-Element-Charakteristika lassen sich Höhen definieren. Inline-Level-Elementen – was das a-Element ist – lassen nur durch die line-height-Eigenschaft in ihrer darzustellenden Höhe beeinflussen.



> Die JavaScript Navi ist auch wiederum nur nötig, um einen Fehler des IE auszugleichen: Der weigert sich nämlich, einen Link auszuführen, wenn dieser einen Button enthält.


Zurecht, denn ein button-Element hat _a?b?s?o?l?u?t? ?n?i?c?h?t?s_ in einem a-Element zu suchen.



> Leider weiß ich per css keine bessere Möglichkeit, die mit allen Browsern gut funktioniert.


Aber zum Glück ich; probier mal folgendes Stylesheet:
	
	
	



```
a:link,
a:visited {
	padding:		<Breite der Hintergrundgrafik>;
	background:		url(<Hintergrundgrafik-URL> no-repeat 0 50%;
}
a:link:hover,
a:visited:hover {
	background-image:	url(<Hintergrundgrafik-URL>;
}
```


----------



## Inspector (8. September 2005)

Gumbo hat gesagt.:
			
		

> Nicht ganz: siehe content-Eigenschaft.


Oops, habe ich ganz übersehen.



			
				Gumbo hat gesagt.:
			
		

> Zurecht, denn ein button-Element hat _a?b?s?o?l?u?t? ?n?i?c?h?t?s_ in einem a-Element zu suchen.


Warum das denn? Wo steht das? Und jetz bitte nicht button mit input type="button" verwechseln! So weit ich weiß, kann außer html, head oder body *Alles* ein Kindelement von a sein. Egal, ob block oder inline.



			
				Gumbo hat gesagt.:
			
		

> Aber zum Glück ich; probier mal folgendes Stylesheet:
> 
> 
> 
> ...


Genau das hatte bei mir nicht funktioniert. Zumindest mit IE 5.5. Da wurde trotzdem die Hintergrundgrafik auf Textgröße reduziert.


----------



## Gumbo (8. September 2005)

> Warum das denn? Wo steht das? Und jetz bitte nicht button mit input type="button" verwechseln! So weit ich weiß, kann außer html, head oder body Alles ein Kindelement von a sein. Egal, ob block oder inline.


Ok, ich muss zugeben, dass ich in diesem Punkt falsch lag. Allerdings kann ich mich mit dem Gedanken immer noch nicht anfreunden, dass soetwas erlaubt ist.
Dennoch muss ich dich verbessern, denn – je nach Dokumenttyp-Definition – sind nur Inline-Level-Elemente als Inhalte des a-Elements erlaubt (vgl. Definition des a-Elements in HTML beziehungsweise XHTML 1.0).


----------



## Inspector (9. September 2005)

Hi,

Das mit den inline only wäre möglich. Obwohl, mann kann ja durchaus einen kompletten div als Link verwenden. Nicht schön, geht aber. Naja, egal. Ein button ist ein inline Element. Allerdings ist dieses Element merkwürdigerweise kaum bekannt.


----------



## Gumbo (9. September 2005)

> Obwohl, mann kann ja durchaus einen kompletten div als Link verwenden. Nicht schön, geht aber.


Bei HTML geht vieles. Jedoch ist nicht alles, was funktioniert, auch erlaubt.


----------



## Watusimann (9. September 2005)

Bestes Beispiel für Gumbos Aussage wäre hier z.B. Die Abrundung der Ecken von einem div. Funktioniert im Firefox, aber nicht im IE
Bsp.-> Hier klicken


----------



## Gumbo (10. September 2005)

Was haben meine Aussagen mit der Abrundung von Ecken zu tun?


----------



## Inspector (12. September 2005)

Hi,

er bezog sich auf Deine Aussage, daß vieles geht, was nicht Standard ist. So gesehen hat er fast Recht. Allerdings gibt es in CSS3 auch offiziell (nach Standard) die Möglichkeit zum abrunden von Ecken. Also: Nicht Alles, was derzeit kein Standard ist, muß auch in Zukunft proprietär bleiben 

Allerdings ist CSS3 derzeit für die Browser noch keine Pflicht.


----------



## Gumbo (12. September 2005)

> […] er bezog sich auf Deine Aussage, daß vieles geht, was nicht Standard ist.


Ich bezog die Aussage eher auf die Verwendung von HTML-Elementen.


----------

