Bild einblenden wenn man über einen link fährt

Internet
1

Hi

wie kann man ein bild neben eine link einblenden lassen wenn man über diesen link fährt (also durch einbindung eines a_hover effekts…)

So mein ich das hier ein beispiel: http://www.vie-spotters.net

danke christian aus wien

2

wie kann man ein bild neben eine link einblenden lassen wenn
man über diesen link fährt (also durch einbindung eines
a_hover effekts…)

Das kannst du auf verschiedene Arten machen, je nachdem, wo und wozu. Für etwas wie dein Beispiel unten könnte man zum Beispiel eine Liste nehmen, als Listenpunkt eine Grafik verwenden, und die nur einblenden, wenn der Pfeil drüber ist.

So mein ich das hier ein beispiel: http://www.vie-spotters.net

In diesem Beispiel hat man aber ganz einfach für den ganzen Button Grafiken verwendet, 2 insgesamt pro Button: einmal mit Flugzeug, einmal ohne. Ist hier ein simpler Grafikaustausch-Rollover-Effekt.

3

danke für deine antwort.

aber wie mach ich das am besten. ich habe eine css datei mit den hover efekt eingebaut. Kann ich nicht dort mein bild festlegen das eingeblendet werden soll.

danke danke

christian

4

aber wie mach ich das am besten. ich habe eine css datei mit
den hover efekt eingebaut. Kann ich nicht dort mein bild
festlegen das eingeblendet werden soll.

Die Buttons als Grafiken, wie in deinem Beispiel, einzubinden, wäre zwar technisch das einfachste, aber sowohl stilistisch als auch Suchtechnisch gesehen nicht optimal (Markieren und Erkennen des Textes durch Suchmaschinen und ähnliches unmöglich).

Besser wäre es, wie gesagt, jeden Button als Listenpunkt zu definieren und dann das Punktsymbol davor zu ersetzen. Wie das genau geht (selbst noch nie gemacht, aber das findest du schon raus ^^) steht im SelfHTML und im CSS4You (http://de.selfhtml.org und http://css4you.de).

Achte darauf, dass die Punkte nicht als Block-Element definiert sind, sonst wird eine neue Zeile erzeugt, was unerwünscht ist, wenn du die in einer Zeile anordnen willst. Außerdem musst du auf Browserkompatibilität achten, der IE kann mit hover derzeit nichts anfangen, außer du setzt es an einem a-Tag ein.

5

Hi

So zum Beispiel

HTML Teil:

Startseite
Privat
Photogalerie
Zitate
Links
Kontakt

(ohne die Leerzeichen im Tag)

CSS Teil:

#navigation a:hover
{
background-image:url(bild.gif);
}

Gruß
diemaus

6

background-image:url(bild.gif);

Mag sein, dass das das ist, was verlangt wird, aber das Beispiel sieht anders aus :smiley:
Ich verstehe es so, dass das Bildchen neben dem Text erscheinen soll.

7

Hey

Mag sein, dass das das ist, was verlangt wird, aber das
Beispiel sieht anders aus :smiley:
Ich verstehe es so, dass das Bildchen neben dem Text
erscheinen soll.

Also bei mir tut es das *gg*

War aber mein Fehler, ich hätte noch den Rest der CSS Datei posten sollen :smile:

#nav
{
background:url(onepx_line.gif) 78% 0% repeat-y;
width:16%;
float:left;
margin:20px 0 0 0; /* Abstand nach oben */
padding:30px 0; /* Abstand nach oben */
}

#nav ul
{
list-style:none;
margin:0;
padding:0;
}

#nav li
{
margin:0;
padding:0;
}

#nav a:link, #nav a:visited
{
display:block;
margin:10px 0; /* Abstand zwischen der Navigation */
padding:0.50em 0.50em 0.50em 1.5em; /* Innenabstand Schrift Navigationskästchen */
-moz-border-radius:7px;
background-color:#ebf6fc;
border:1px solid #a6a6a6;
height:1em; /* Größe Navigationskästchen */
background:#ebf6fc right no-repeat;
color:#000000;
}

html>body #nav a:link, #nav a:visited
{
height:auto;
}

#nav a:hover
{
background-image:url(blume.gif);
}

(keine Kommentar zu den verschiedenen Größenangaben in em und px bitte, Version ist schon wieder verworfen :smile:, war nur nen Test)

Anzusehen unter http://home.arcor.de/diemaus29

Gruß
diemaus