--- title: "TMENU Bildwechsel und Farbanpassung mit Mouseover" url: "https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover" source: "typo3.net" tags: ["TYPO3","Menüs","Frage","HTML & CSS"] created: "2006-09-20" last_reply: "2006-09-22" replies: 10 solved: false page: 1 pages: 1 lang: "de" --- # TMENU Bildwechsel und Farbanpassung mit Mouseover TYPO3 › Menüs · 10 Antworten · gestartet 2006-09-20 ## Eröffnungsbeitrag **DaTom** · 2006-09-20 · [Beitrag #1](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/1) Hallo alle miteinander! Ich bin bald am Verzeifeln.. ! Ich habe ein Textmenü, bei dem vor dem Text noch ein Bild gesetzt ist. Wenn ich mit der Maus über dem Bild oder der Schrift bin, soll das Bild durch ein anderes ersetzt und die Schrift Rot gefärbt werden. Bisher hab ich es leider nur geschafft, dass sich der Text oder das Bild seperat ändert, aber nicht gleichzeitig. ```typoscript 2 = TMENU 2.NO = 1 2.NO { wrapItemAndSub =

| ATagParams= class="menu" linkWrap = |
} ``` Meine CSS sieht wie folgt aus: ```html a.menu:link { color: #000000; line-height:15px; font-weight: normal; font-size: 12px; font-family: Arial Narrow; text-decoration: none } 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 } h1.replace{position:relative; font-family:Arial;font-size:12; margin: 0px 0px 0px 0px;padding:0px; /* IE5/Mac */ /* \*/ overflow: hidden; /* */ } .replace span{display:block;position:absolute;top:0px;left:0px;z-index:1;/*Opera 5 und 6*/} #k1, #k1 span{height:20px; width:20px;background-image: url(../images/menu/plus-schwarz.gif);} #k1-a, #k1-a span{height:20px; width:20px;background-image: url(../images/menu/plus-rot.gif);} ``` Hat einer vielleicht von euch eine Idee, wie man das machen könnte? #paralyzed# Ich wäre wirklich sehr dankbar! ## Antworten ### [#2](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/2) · Honk88 · 2006-09-20 Hi, guckst du hier : LG Honk ### [#3](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/3) · DaTom · 2006-09-20 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? ### [#4](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/4) · Fiberman · 2006-09-20 Ich habe das selbe Problem! [/d/50200-rollovereffekt-mit-icons-im-horizontalen-tmenu](https://www.typo3.net/d/50200-rollovereffekt-mit-icons-im-horizontalen-tmenu) bis jetzt konnte mir auch niemand helfen! Gruß ### [#5](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/5) · Unbekannter Benutzer · 2006-09-21 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: ```typoscript 2 = TMENU 2.NO = 1 2.NO { wrapItemAndSub = | ATagParams= class="menu" linkWrap = | } ``` und dazu dieser HTML-Code: ```html 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 ### [#6](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/6) · DaTom · 2006-09-21 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# ### [#7](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/7) · Unbekannter Benutzer · 2006-09-21 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): ```html 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... ### [#8](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/8) · DaTom · 2006-09-21 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? ;) ### [#9](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/9) · DaTom · 2006-09-21 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# ### [#10](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/10) · Unbekannter Benutzer · 2006-09-21 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. ### [#11](https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover/11) · DaTom · 2006-09-22 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!? :) --- Quelle: „TMENU Bildwechsel und Farbanpassung mit Mouseover“, typo3.net, https://www.typo3.net/d/50302-tmenu-bildwechsel-und-farbanpassung-mit-mouseover Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.