Hängeregister umsetzen

Bild: gaengsterbruth.ch/…/menu.gif

Ich möchte folgendes Menü umsetzen. Leider ist mir nicht ganz klar wie ich dabei vorgehen muss. Die zwei Menüs konnte ich bereits als TMENU ausgeben.Weiss nun nicht genau

1.Reicht mir für das was ich machen möchte ein TMENU oder benötige ich dazu ein GMENU ?
2.Wie löse ich es das ich beim aktuell angecklickten Menüpunkt das Bild in den Hintergrund lege ? (Kenne die unterschiedlichen Zustände, den ACT Zustand habe ich bereits so hingekriegt das sich die Textfarbe ändert, weiss einfach nicht wie ich des Bild rein kriege)
3.Wie kriege ich es hin, das sich der Punkt beim Rollover gleichermassen ändert wie beim Drücken des Menüpunkts(JS oder TS)? Den RO Zustand habe ich auch versucht einzubauen, funktioniert jedoch nicht.
4. Und als allerletztes soll sich das obere Menü nicht erst beim Klicken sondern schon beim Rollover ändern.(Nehme an mit JS)

Weiss sind etwas viele Fragen, aber hab da echt keinen Plan wie ich was realisieren soll. Hab die HowTos gelesen bin jedoch nicht wirklich weiter gekommen.

Mein Menü im TS:

 # Menu1 darstellen
  marks.MENU1 = HMENU
  marks.MENU1.excludeUidList = 58,59,60
  marks.MENU1.entryLevel = 0
  marks.MENU1.1 = TMENU
  marks.MENU1.1 {
   noBlur = 1
   NO = 1
   NO.ATagParams = class ="m1"
   NO.linkWrap =  <span class="marginleft"> | </span> 
   ACT = 1
   ACT.ATagParams = class ="m1-aktiv"
   ACT.linkWrap =  <span class="marginleft"> | </span>
   RO = 1
   RO.ATagParams = class ="m1-aktiv"
   RO.linkWrap =  <span class="marginleft"> | </span> 
  } 
  
  #Menu2 darstellen
  marks.MENU2 = HMENU
  marks.MENU2.entryLevel = 1
  marks.MENU2.1 = TMENU
  marks.MENU2.1 {
   noBlur = 1
   NO.ATagParams = class ="m2"
   NO.linkWrap =  <span class="marginleft"> | </span> 
  } 
  #Menu3 darstellen
  marks.MENU3 =HMENU
  marks.MENU3.excludeUidList = 37,36,35,34,33,32
  marks.MENU3.entryLevel = 0
  marks.MENU3.1 = TMENU
  marks.MENU3.1{
   noBlur = 1
   NO.ATagParams = class ="m3"
   NO.linkWrap =  <span class="marginleft"> | </span> 
  }

Die zugehörigen CSS Formate:

 .m1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  font-weight: bold;
  color: #09018B;
  text-decoration:none
 
 }
 .m1-aktiv {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  font-weight: bold;
  color: #C4C3C9;
  text-decoration:none
  background-image: url(hangeregister.jpg);
 }
 
 .m2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration:none
 }

.m3 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  font-weight: bold;
  color: #09018B;
  text-decoration:none
 }

Danke im vorraus für jegliche Hilfe.

das lässt sich textbasiert und über css umsetzen. Reihenfolge der Umsetzung: erst das HTML Template bauen und dort das Menü in allen seinen Zuständen definieren, danach in typo3 umsetzen.

Viele Grüße
Niki

Danke für deine Antwort.
Konnte jetzt das CSS umsetzen.
Nur leider krieg ich es im Typo3 nicht gewrappt.
Kann mir jemand helfen wie ich das menu jetzt umgesetzt bekomme?

Mein Typo3 Menü sieht sieht immer noch gleich aus wie oben.
Vom HTML her sieht das menü folgendermassen aus

<div id="header">
 <div class="menu3">###MENU3###</div>
 <div class="menu2">###MENU2###</div>
</div>
<div id="navigation">
<li><a href="#"><span>###MENU1###</span></a></li>
</div>

Hier die zugehörigen CSS angaben:

#header .menu3 {
  height: 16px;
  left: 810px;
  position: absolute; 
  text-align: center;
  top: 69px;
  width: 132px;
  z-index: 10;
  font-weight: bold;
  color: #09018B;
  text-decoration:none
}
#header .menu2 {
  color: #FFF;
  height: 24px;
  left: 200px;
  line-height: 24px;
  padding-left: 5px;
  position: absolute;
  width: 580px;
  top: 69px;
}
#navigation {
  height: 17px;
  padding-left: 200px;
  width: 580px;
  font-weight: bold;
  text-decoration:none
}
#navigation a{
  color:  #09018B;
  text-decoration:none
}
#navigation a, #navigation a span{
  display: block;
  float: left
}
/* Hide from IE5-Mac \*/
#navigation a, #navigation a span{
  float: none
}
/* End hide */
#navigation a:hover{
  color: #C4C3C9;
  background: #09018B url(../images/tabs/l1.gif) left top no-repeat;
  padding-left: 10px
}
#navigation a:hover span{
  background: url(../images/tabs/r1.gif) right top no-repeat;
  padding-right: 10px
}
#navigation ul{
  list-style: none;
  padding: 0;
  margin: 0
}
#navigation li{
  float: left;
  margin: 0;
}

#angry# wär ja gar nicht so schwierig! Erger mich gerade das ich nicht schon früher rausgekriegt hab, wie ich des Ganze gewrappt krieg.

# Menu1 darstellen
  marks.MENU1 = HMENU
  marks.MENU1.excludeUidList = 58,59,60
  marks.MENU1.entryLevel = 0
  marks.MENU1.1 = TMENU
  marks.MENU1.1 {
   noBlur = 1
   NO = 1
   NO.beforeWrap = <li> 
   NO.ATagBeforeWrap = 1
   NO.ATagParams = class ="navigation"
   NO.linkWrap = <span> |</span>
   NO.afterWrap =</li>
  }