Navigation mit MOuseover

[one]

ich hab ein problem mit mouseover effekt und java, ich hab s zwar nun fast gelöst aber...

habe noch ein problem und zwar ist das 1.jpg zu tief wenn der mouseover effekt kommt. kann ich das einzeln anprechen? im css oder so?
alle anderen sind okay, nur das 1.jpg müsste ca. 50px höher.

<div id="content-text1">
<a href="/kontakt"><img src=/wp-content/themes/wpremix2/images/navi/schrift1.png" onMouseOver="this.src='/wp-content/themes/wpremix2/images/navi/1.jpg';"onMouseOut="this.src='/wp-content/themes/wpremix2/images/navi/schrift1.png';"; /></a>
</div>

danke

[LX]

Verwende die Pseudoklasse :hover in CSS - und schreibe einen Inhalt versteckt in den Link, damit die Sehbehinderten auch was von Deiner Seite haben:

HTML:

<a href="/kontakt" id="nav-kontakt"><span>Kontakt</span></a>

CSS:

#nav-kontakt { display: block; height: 18px; width: 80px; background: url(/wp-content/themes/wpremix2/images/navi/schrift1.png) 0px 0px no-repeat; }  
#nav-kontakt:hover { background-image: url(/wp-content/themes/wpremix2/images/navi/1.jpg); }  
#nav-kontakt span { display: none; }

Natürlich musst Du Höhe und Breite anpassen. Wenn Du schon dabei bist, den Code zu überarbeiten, kannst Du gleich darüber nachdenken, ob eine ul-Liste nicht semantischer als ein einfaches div wäre, um das Menü zu strukturieren.

Gruß, LX

[Felix Riesterer]

Lieber one,

in Ergänzung zur Antwort von LX:

<div id="content-text1">
<a href="/kontakt"><img src=/wp-content/themes/wpremix2/images/navi/schrift1.png" onMouseOver="this.src='/wp-content/themes/wpremix2/images/navi/1.jpg';"onMouseOut="this.src='/wp-content/themes/wpremix2/images/navi/schrift1.png';"; /></a>
</div>

Eine Navi erstellt man so: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>

Liebe Grüße,

Felix Riesterer.