Grafisches Hauptmenü mit Rollover-Effekt erzeugen
Die Herausforderung war, ein Menü zu erzeugen, das Grafiken als Schaltflächen enthält. Der jeweils aktive Menüpunkt soll hervorgehoben werden und die beiden Grafiken sollen vom Benutzer selbst hochgeladen werden können. Gleiches gilt für neue Menüpunkte. Dort soll der Benutzer selbst die Grafiken hinterlegen können.
Festes einbauen in das Template scheidet somit aus.
Der folgende TypoScript-Code löst das Problem. Die beiden Grafiken werden dabei im Datensatz als Ressource hinterlegt. Inaktiver Menüpunkt: erste Grafik; aktiver Menüpunkt: zweite Grafik.
# Aufbau des grafischen Hauptmenues
lib.menu_1 = COA
lib.menu_1.40 = HMENU
lib.menu_1.40 {
entryLevel = 0
1 = TMENU
1 {
collapse = 0
expAll = 1
noBlur = 1
NO = 1
NO {
allWrap = |
insertData = 1
#Den Link bauen wir selber, um die Struktur besser in Griff zu bekommen
# und Darstellungsfehler zu reduzieren
doNotLinkIt = 1
# Den gesamten Wrap bauen wir erstmal selber auf...
stdWrap.cObject = COA
stdWrap.cObject {
# hier beginnt der Link - den wir selber bauen
10 = TEXT
10 {
field = abstract // description // subtitle // title
typolink {
parameter.field = uid
returnLast = url
}
wrap = <a href="|" onfocus="if(this.blur)this.blur()" title="
insertData = 1
}
# jedes A-Tag hat ein Recht auf ein title-Attribut
11 = TEXT
11 {
field = abstract // description // subtitle // title
wrap = |">
insertData = 1
}
20 = COA
20 {
5 = TEXT
5.value=<img src="
6 = IMG_RESOURCE
6 {
file.import.field = media
file.import = uploads/media/
file.import.listNum = 0
}
7 = TEXT
7.value=" width="
10 = TEXT
10.data = TSFE:lastImgResourceInfo|0
15 = TEXT
15.value = " height="
# Höhe und Breite nicht vergessen, da das Bild u.U. skaliert werden muss,
# wenn die Bilder nicht auf jede Seite die gleiche Größe haben
20 = TEXT
20.data = TSFE:lastImgResourceInfo|1
25 = TEXT
25.value = |*||*|" style="border-width:0px;margin-left:0px;padding-left:0px;" />
</a><img src="img/buttons/trenner.png" width="41" height="108" alt="" border="0">
||" style="border-width:0px;margin-left:0px;padding-left:0px;" /></a>
<img src="img/buttons/trenner.png" width="41" height="108" alt="" border="0">
}
}
}
# Wenn es die aktive Seite ist: Anderes Bild verwenden
ACT = 1
ACT < .NO
ACT.stdWrap.cObject.20.6.file.import.listNum=1
}
}