Supportnet / Forum / Webseiten/HTML
CSS-Bild anzeigen bei einem Link
Frage
Hallo,
da ich mein Problem mit google und Co. nicht lösen konnte, hoffe ich hier Hilfe zu finden. Ich möchte gern, dass wenn ich mit der Maus über einen Link fahre, dieser unterstrichen wird (ist es vorher nicht) und dass Links von dem Wort ein Bild (Pfeil) angezeigt wird. Also das mit dem unterstreichen bekomme ich ja hin, aber wie mache ich das mit dem Bild?
Anna
Antwort 1 von Manolo
Hallo,
eigentlich sollte ich das wissen, aber irgendwie ist das auch schon zu spät.
Das richtige forum dafür ist aber selfhtml forum, die Leute wiessen das auf jede Fall.
forum.de.selfhtml.org/
Gruß Manolo
eigentlich sollte ich das wissen, aber irgendwie ist das auch schon zu spät.
Das richtige forum dafür ist aber selfhtml forum, die Leute wiessen das auf jede Fall.
forum.de.selfhtml.org/
Gruß Manolo
Antwort 2 von annasilie
Danke erst mal für den Tipp, aber vielleicht weiss es ja auch jemand in diesem Forum :-).
Anna
Anna
Antwort 3 von rfb
a[href]:hover { text-decoration:underline; }
a:before { content:url(pfeil.gif); }
beides kombinieren - also Bild nur davor bei Mouseover - lässt sich so nicht machen, aber über
Außerdem hinkt der IE dem CSS-Standart hinterher, mit :before kann er nix anfangen, funktionert aber mit Mozilla & Co und Opera.
Alternativ
a { background-image:ohnepfeil.gif; display:block; width: ...; height:...; (Maße des Bildes} }
a[href]:hover { background-image:mitpfeil.gif; }
dazu gehören natürlich zwei Bilder ;-)
Außerdem musst du den Text ein bisschen in den Block einpassen, so dass links ein Platz für den Pfeil bleibt.
Antwort 4 von annasilie
Hm also ich wollte die alternative Methode ausprobieren, damit es im IE auch funzt. Habs so gemacht, aber es geht nicht :-(:
CSS-Datei:
und der Aufruf in der html-Datei:
Was mache ich falsch?
Danke
CSS-Datei:
a { background-image:url("Pfeil-keiner.gif"); display:block; width: 7px; height:13px;}
a[href]:hover {
color: #FFFFFF;
text-decoration: underline;
background-image:url("Pfeil-weiss.gif");
}
und der Aufruf in der html-Datei:
<td width="97" class="normalfett" style="background-image:url(Webdesign/button_mitte.gif);"><a href="home_neu.php" target="main" style="padding-left:20px;">Home</a></td>
Was mache ich falsch?
Danke
Antwort 5 von rfb
hm, natürlich könnte das Problem schon daran liegen, dass "Pfeil-keiner.gif" Grossbuchstaben enthält (Faustregel: Dateinamen immer klein)
Aber gerade hab ich festgestellt, dass IE auch a[href] nicht immer richtig interpretiert - aber wenn du [href] weglässt sollte es klappen (bei mir tut er's dann)
Übrigens: die Mischung von separatem CSS und style-Attribut im tag ist nicht gerade empfehlenswert.
Aber gerade hab ich festgestellt, dass IE auch a[href] nicht immer richtig interpretiert - aber wenn du [href] weglässt sollte es klappen (bei mir tut er's dann)
Übrigens: die Mischung von separatem CSS und style-Attribut im tag ist nicht gerade empfehlenswert.