TMENU Bildwechsel und Farbanpassung mit Mouseover
Jo, aber dieses Beispiel bezieht sich auf ein Bild-Menü (GMENU)
Ich verwende aber ein Text-Menü (TMENU), bei dem noch ein Bild vor dem
Text steht. Text und Bild müssen sich gleichzeitig verändern. Hat jemand noch eine Idee?
Zumindest DaTom kann ich helfen. Bei Fiberman verstehe ich noch nicht so ganz was du vorhast.
Also DaTom so wie ich den Code verstehe willst du nur einen kleinen Pfeil vor deinen Links haben und der soll beim Mouseover die Farbe zusammen mit dem Linktext wechseln.
Folgender TS Code:
2 = TMENU
2.NO = 1
2.NO {
wrapItemAndSub = <tr><td><img src="fileadmin/images/spacer.gif" height="20" width="20" alt="" /></td><td width="190" class="menu">|</td></tr>
ATagParams= class="menu"
linkWrap = |
}
und dazu dieser HTML-Code:
a.menu:link { color: #000000; line-height:15px; font-weight: normal; font-size: 12px; font-family: Arial Narrow; text-decoration: none; padding-left: 10px; background-image: url(../images/menu/plus-schwarz.gif); }
a.menu:active { color: #FF0000; line-height:15px; font-weight: normal; font-size: 12px; font-family: Arial Narrow; text-decoration: none }
a.menu:visited { color: #000000; line-height:15px; font-weight: normal; font-size: 12px; font-family: Arial Narrow; text-decoration: none }
a.menu:hover { color: #FF0000; line-height:15px; font-weight: normal; font-size: 12px; font-family: Arial Narrow; text-decoration: none; background-image: url(../images/menu/plus-rot.gif);}
Sollten eigentlich das gewünschte Ergebnis bringen.
Gruß
Christian
Nein, leider nicht! #angry#
Sobald ich über den Menüpunkt mit der Maus gehe, erscheint das Bild als Hintergrund - hinter dem Text! Das hab ich bisher auch schon probiert. Bei mir müsste aber das Bild davor stehen. Es dürfte schon ein Hintergrund sein, aber er müsste halt links neben dem Text gezeichnet sein und das auch nur einmal. Dafür gibt es ja diesen No-Repeat Befehl in CSS, aber dann steht das Bild immer noch hinter dem Text. Ich müsste quasi den Link rechts verrücken, damit der Hintergrund frei liegt. Dann aber würden die Abstände nimmer ordentlich zusammenpassen, schätz ich mal. Hat vielleicht noch jemand eine Idee? #paralyzed#
ja, meine Schuld, hab das CSS nicht ausformuliert...
Nimm mal das background-image wieder raus und mach folgendes (natürlich an beiden Stellen, mit dem jeweils passenden Bild):
display: block;
background: url(../images/menu/plus-rot.gif) left no-repeat;
und denk an das padding-left: 10px; das ist schon unten gepostet hatte, das sollte den Linktext nach rechts rücken und so den Weg freimachen für das Bild...
Das wiederum hat überhaupt kein Effekt gehabt! :o #angry# Kein Bild, kein Rollover!
Ich glaub, ich muss das unter "Typo-kann-das-nicht" abstempeln! 🙁
Oder hat noch jemand ne Idee, wie man das wilde Tier zähmen kann? 😉
Ok, selbst nach dem Auffinden von kleinen "Verschreibern" 😉 funktionierte es nicht wie gewünscht. Text färbte sich rot, war eingerückt.... aber mit ihm auch das Bild! 🙁 Sprich: Es geht net! #paralyzed#
doch das muss so gehen, ich habs so in der Art schon gemacht. Vielleicht muss ich das bei mir mal nachbauen und kann dir dann den genauen Code posten. Ich weiß gerade nicht genau wo es bei dir klemmt, aber das geht auf jeden Fall.
Sorry, Kitsunet! Erstmal vielen Dank, dass du dich meinem Problem angenommen hast! 😉
Also ich habs exakt genauso übernommen, wie du es gepostet hast und habe auch noch die fehlenden Semi´s mit reingedrückt, aber der blöde Hintergrund wir erst ab dem Padding gezeichnet. Vielleich kannst du mir ja mal dein Example posten, dann könnt ich Vergleiche ziehen!? 🙂