Bei Hover Grafik hinter Link ändern mit CSS

[MasterGeo]

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]

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]

Ok Danke, damit komme ich schon mal weiter.

 

[Gumbo]

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]

Nicht ganz: siehe content-Eigenschaft.

Oops, habe ich ganz übersehen.

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.

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>;
}

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

 

[Gumbo]

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]

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]

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]

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]

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