[ERLEDIGT] Grafik als hovereffekt?

[TeeZett]

also auf z-unit.de möchte bei den Navis also wenn ich mit der maus ein link berühre das da hinter ein smily kommt.... quasi so als hover effekt.

wie mache ich das, das ich eine grafik in hover effekt einbinde?

Wenn ihr noch gute vorschläge zur page habt, könnt ihr sie auch noch melden.

 

[dementia]

Indem du dem a:hover en background-image mit repeat: no-repeat gibst.

 

[TeeZett]

Also mein aktueller ist so:

A:hover {
TEXT-DECORATION: none; FONT-WEIGHT: BOLD; FONT-SIZE: 90%; COLOR: #C75E1A;

 

[dementia]

Also mein aktueller ist so:

A:hover {
TEXT-DECORATION: none; FONT-WEIGHT: BOLD; FONT-SIZE: 90%; COLOR: #C75E1A;

Ja und?

 

[TeeZett]

Und wie genau muss ich dein vorschlag einbauen?!

 

[maverick7bm]

also so:

a:hover{ 
        background-image:url(img/bild.jpg); 
        background-repeat:no-repeat;
}

oder hies es doch nur repeat :roll:

 

[dementia]

a:hover {
  background-image: url(img/smiley.gif);
  background-repeat: no repeat;
}

mfg

// oh da war jemand schneller *g*
// nein, es heisst background-repeat ^^

 

[TeeZett]

Hat nich geklappt :( hier so siehts aus:

Auschnitt aus dem Css Doc.

}
A:link {
COLOR: #003966; FONT-WEIGHT: BOLD; TEXT-DECORATION: none; FONT-SIZE: 90%;
}
A:active {
COLOR: #003966; FONT-WEIGHT: BOLD; TEXT-DECORATION: none; FONT-SIZE: 90%;
}
A:visited {
COLOR: #003966; FONT-WEIGHT: BOLD; TEXT-DECORATION: none; FONT-SIZE: 90%;
}
a:hover {
background-image: url(smiley.gif);
background-repeat: no repeat;
}
TD {
FONT-WEIGHT: normal; COLOR: #000000; FONT-SIZE: 85%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;

 

[dementia]

Was passiert denn, zweigt er das Bild einfach nicht an oder den ganzen Link nich oder was?

// achja, es heisst nebenbei auch no-repeat, hab mich oben vertan ^^

 

[TeeZett]

So nun habe ich es aber jeztz habe ich ein problem und zwar ich wollte ja nur das die grafik (der smiley) immer nur hinters wort/link kommt. Aber jetzt kommen ganz viele smileys im hintergrund?

 

[TeeZett]

So nun habe ich es hinbekommen das nur ein Smily da ist aber jetzt ist er VOR dem wort aber er soll hinter einem link stehen. hier nochma der css code:

#menu a:hover {background-color:#ffffff;
color: #004080;
text-decoration:none ;font-family:verdana, sans-serif; font-size:9pt;
width:140px;
border-bottom:dotted 1px #000000;
padding-left: 4px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
background-image: url(x.gif);
background-repeat: no-repeat;

 

[dementia]

background-position: center;

 

[TeeZett]

Ja aber nun ist es so wenn z.b. zwei links habe in der navi
z.b.:

News
Gästebuch

Und bei news taucht der smily schön in der mitte auf. aber wörter die größer als die hälfte sind wie "Gästebuch" da taucht der smily beim "uc" auf

ich will ja das der smily immer hinter dem letzten buschtaben kommt

 

[Verhueterli]

Das ist mit CSS nicht möglich, lediglich mit JavaScript ist es realisierbar.

 

[TeeZett]

Das ist mit CSS nicht möglich, lediglich mit JavaScript ist es realisierbar.

Okay habe das denn jetzt so gelöst:

background-position: right;

Edit: Danke für diese schnelle Hilfe :)