mousover

lippl

also ich weis ja dass es schon ziehmlich viele beiträge zu mousovers gibt=)
aber ich hab jetz t einfach bei den ganzen anderen nicht mehr durchgeblickt=(
soo also:
ich möchte in meiner navi für die links bildre einsetzten und di emit einem mousover versehen,
und bräuchte dazu einen ganz normalen standard code in dem ich meine quellen nur noch einsetzen muss(schreibts es am besten hin)
ich bin leider nbissl begriffsstutzig=)

also thx schonmal für alle, die sich die mühe machn, im vorraus.

driver

im css:

Code

a {
background-image:url(bild_normal.jpg);
color:#000000;
line-height:20px;
}


a:hover {
background-image:url(bild_over.jpg);
color:#0000ff;
line-height:20px;
}

Alles anzeigen

so ähnlich evtl....

lippl

und wo soll ich da jetz den link einsetzen inn demm css code insetzten und wo den ganzen css code im html??

sejuma

Da du vermutlich für jeden Link unterschiedliche Bilder verwendest, brauchst du unterschiedliche Link-Klassen.

Schreibe diesen CSS-Code innerhalb des headbereiches oder in eine ausgelagerte CSS-Datei:

Code

<style type="text/css">
a.link1 {
background-image:url(bild_normal1.gif);
width:100px;height:50px;
}


a.link1:hover
{
 background-image:url(bild_hover1.gif);
}
</style>

Alles anzeigen

Für jeden weiteren Link ersetze über all die "1" mit der "2" usw.
Für die Angaben für width und height setze die Werte deiner Grafikdateien ein.
Innerhalb des body-Bereichs wo der Link hin soll:

Code

[url='zielseite.html'][/url]

Beim nächsten Link: class="link2" usw.

Viel Erfolg!

lippl

bei mir wird alle richtig angezeigt(zumindest die größe aber das bild nicht
ich hab den code

Code

<style type="text/css">
a.link1 {
background-image:url(Button/Home Button.gif);
width:180px;height:50px;
}


a.link1:hover
{
 background-image:url(Button/Home Button1.gif);
}
</style>

Alles anzeigen

im headbereich angegebn
und:

Code

<td>[url='Home.htm']<img width="180" height="50" border="0">[/url]</td>

im body bereich angegebn aber was ist daran jetzt falsch??

sejuma

Lass mal hier

Code

<td>[url='Home.htm']<img width="180" height="50" border="0">[/url]</td>

den ganzen img-Tag weg.
Außerdem speichere mal deine Bilder in kleiner Schrift und ohne Blank ab, lade sie nochmal hoch und passe ebenfalls den CSS-Code den neuen Bildbezeichnungen an.

lippl

ja aba dann is ja kein link mehr dabei der mich zur nächsten seite bringtz!!!!

lippl

ich habs jetz so gelöst=):

Code

<td><a href="%DCber%20mich.html"
onMouseOver="dududu.src='Button/%DCber%20mich%20Button1.gif';"onMouseOut="dududu.src='Button/%DCber%20mich%20Button.gif';"> 
            [img]Button/%DCber%20mich%20Button.gif[/img]</a></td>[quote]
aufjedenfall funtzt's=)[/quote]

lippl

aber jetz hab ich das problem dass es nich gleich beim seitenaufruf des rollover bild läd sondern erst beim darüberfahren un das dauert=(
wisst ihr zufällig n code dafür dass es die bilder auch gleich beim seitenaufruf öffnet????

http://lipplzone.de.ms
meine hp=)

Tags