Zum Inhalt springen

TMENU Link für Hintergrundgrafik

Erstellt am 15. Oktober 2008 · 4 Antworten · letzte Antwort am 15. Oktober 2008

Tags: HTML & CSS, Frage

MB76 ·

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?

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>
  }
  }
}
Dander ·

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.

MB76 ·

danke für die Info.
Könntest du mir noch kurz sagen, wie ich das mit dem Blockelement konkret mache?
Vielen Dank schonmal

Dander ·
.deine_klasse {
display: block;
width: 200px;
height: 20px;
background: url('fileadmin/bilder/bild.jpg');
}

so in der art

MB76 ·

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:

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;
}