TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

jetzt buchen
Forum » TypoScript » Menüs

TMENU Link für Hintergrundgrafik


Autor Nachricht
Verfasst am: 15. 10. 2008 [12:36]
MB76
Themenersteller
Dabei seit: 24.09.2008
Beiträge: 34
 Im TMENU funtkionier der Maus-Over-Zustand (RO) nicht.
Außerdem würde ich das Menü gerne so gestalten, dass nicht nur der Klick auf den Text, sondern auch auf die Hintergrundgrafik des Menüs auf die jeweilige Seite verlinkt.
Wie kann ich das machen?
TYPOSCRIPT
Menu_Rechts = HMENU
Menu_Rechts.wrap = <div>|<div>
  Menu_Rechts.special = directory
  Menu_Rechts.special.value = 768
  Menu_Rechts {
  1 = TMENU
  1 {
    noBlur = 1
    expAll = 0
    wrap = <div>|<div>
    NO {
      allWrap = <div class="mainnav1_no"><div class="mainnav1_font"> |</div></div>
      stdWrap.case =
       } //
    ACT < .NO
    ACT = 1
    ACT{
      allWrap = <div class="mainnav1_act"><div class="mainnav1_font"> |</div></div>
    }
    RO < .NO
    RO = 1
    RO{
      allWrap = <div class="mainnav1_ro"><div class="mainnav1_font"> |</div></div>
    }
  }
  2 = TMENU
  2 {
    noBlur = 1
    expAll = 0
    wrap = <div>|<div>
    NO {
      allWrap = <div class="mainnav2_no"><div class="mainnav2_font"> |</div></div>
      stdWrap.case =
      } //
      ACT < .NO
    ACT = 1
    ACT{
      allWrap = <div class="mainnav2_act"><div class="mainnav2_font"> |</div></div>
    }
      RO < .NO
    RO = 1
    RO{
      allWrap = <div class="mainnav2_ro"><div class="mainnav2_font"> |</div></div>
  }
  }
  3 = TMENU
  3 {
    noBlur = 1
    expAll = 0
    wrap = <div>|<div>
    NO {
      allWrap = <div class="mainnav3_no"><div class="mainnav3_font"> |</div></div>
      stdWrap.case =
      } //
      ACT < .NO
    ACT = 1
    ACT{
      allWrap = <div class="mainnav3_act"><div class="mainnav3_font"> |</div></div>
    }
      RO < .NO
    RO = 1
    RO{
      allWrap = <div class="mainnav3_ro"><div class="mainnav3_font"> |</div></div>
  }
  }
}
Profil
Verfasst am: 15. 10. 2008 [14:28]
Dander
Dabei seit: 18.07.2003
Beiträge: 2287
 Ja, RO gibt es nur für das GMENU,
anstatt von RO kannst du in CSS einen hover effekt
einbauen.

Um die Hintergrafik klickbar zu machen, machst du am besten aus
deinem A-Tag ein block element und baust die hintergrund grafik direkt dort ein.
ProfilICQ
Verfasst am: 15. 10. 2008 [14:40]
MB76
Themenersteller
Dabei seit: 24.09.2008
Beiträge: 34
 danke für die Info.
Könntest du mir noch kurz sagen, wie ich das mit dem Blockelement konkret mache?
Vielen Dank schonmal
Profil
Verfasst am: 15. 10. 2008 [16:11]
Dander
Dabei seit: 18.07.2003
Beiträge: 2287
HTML
.deine_klasse {
display: block;
width: 200px;
height: 20px;
background: url('fileadmin/bilder/bild.jpg');
}


so in der art
ProfilICQ
Verfasst am: 15. 10. 2008 [19:10]
MB76
Themenersteller
Dabei seit: 24.09.2008
Beiträge: 34
 danke für die Hilfe. im Firefox geht jetzt alles. Nur im IE geht der Mouse-over Effekt für die Hintergrundgrafik nicht. Woran liegt das?

außerdem hab ich beim klicken den häßlichen gestrichelten Rand um das Feld. Wie bekommt man den weg?

das css:
HTML
div.mainnav1_no{
 position: relative;
  width: 220px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu1_no.gif);
  float: right;
}
 
div.mainnav1_no:hover{
 position: relative;
  width: 220px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu1_act.gif);
  float: right;
}
 
div.mainnav1_act{
  position: relative;
  width: 220px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu1_act.gif);
  float: right;
}
 
div.mainnav1_ro{
  position: relative;
  width: 220px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu1_act.gif);
  float: right;
}
 
div.mainnav1_font a {
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight: ;
  font-size: 14px; 
  color: #ffffff; 
  display: block;
  width: 220px;
  height: 30px;
  text-decoration: none; 
  align: left;
  padding-left: 4px;
  padding-top: 4px;
}
 
div.mainnav1_font a:visited {
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight: ;
  font-size: 14px; 
  color: #ffffff; 
  display: block;
  width: 220px;
  height: 30px;
  text-decoration: none; 
  align: left;
  padding-left: 4px;
  padding-top: 4px;
}
 
div.mainnav1_font a:hover {
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px; 
  color: #ffffff; 
  display: block;
  width: 220px;
  height: 30px;
  text-decoration: none; 
  align: left;
  padding-left: 4px;
  padding-top: 4px;
}
 
div.mainnav1_font{
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight: ;
  font-size: 14px; 
  color: #ffffff; 
  display: block;
  width: 220px;
  height: 30px;
  text-decoration: none; 
  align: left;
  padding-left: 4px;
  padding-top: 4px;
}
Profil