Hallo,
ich suche nach einer Möglichkeit, ein grafisches Menü mit einem weichem MousOver-Effekt zu erzeugen.
Das Menü besteht je Menüpunkt aus dem Bild, dass jeweils über die Media-Ressource der Seite eingepflegt wurde. Nun möchte ich mit dem MouseOver ein zweites Bild (zur Not über ein weiteres Datenfeld hinterlegt) weich überblenden lassen.
Kann jemand helfen?
probiers mal so
tmp.menue = HMENU
tmp.menue .special = directory
tmp.menue .special.value = deineID
tmp.menue .1 = GMENU
tmp.menue .1 {
NO = 1
NO {
10 = IMAGE
10 {
file.import.field = media
file.import = uploads/media/
file.import.listNum = 0
}
XY = 308, 241
#wrap = |
backColor = #f9f8f7
}
RO < .NO
RO {
20 = IMAGE
20 {
file.import.field = media
file.import = uploads/media/
file.import.listNum = 1
}
XY = 308, 241
#wrap = |
backColor = #f9f8f7
}
}
@grisub
Danke, aber dass hilft mir nicht wirklich :-)
Es geht in erster Linie darum, die Bilder weich überzublenden. Das grafische Menü erlaubt nur einen abupten wechsel über RO(?).
Ich habe aber mittlerweile eine Lösung mit einemm TMENU und jQuery gebastelt. Dabei werden jeweils zwei Hintergrundbilder (standard und hover) verwendet, die der TYPO3-Redaktuer leicht über die Seiteneigenschaften uploaden kann. Habe dazu zwei neue Datenfelder in die Seiteneigenschaften eingebaut und ein neues Sitemap-Menü "ausgewählter Seiten" erstellt. Geht super!
Was mich in diesem Zusammenhang aber sehr interessiert, ich würde gern den Seitentitel mit dem GifBuilder auf die beiden Bilder rendern lassen. Unten mein TS. Hat jemand eine Idee?
tt_content.menu.20.df_imagemenu_pi1 = HMENU
tt_content.menu.20.df_imagemenu_pi1 {
special = list
special.value.field = pages
wrap = <ul class="imagemenu">|</ul>
1 = TMENU
1 {
target = _self
noBlur = 1
NO {
# Titel aus dem DB-Feld 'title' soll nicht automatisch angezeigt werden, leeres DB-Feld 'subtitle' zuordnen
stdWrap.field = subtitle
# stdWrap.wrap = <span class="imagemenu-title">|</span>
stdWrap.htmlSpecialChars = 1
wrapItemAndSub = <li class="menu menu1">|</li>
stdWrap.dataWrap (
<span style="position:absolute; display:none; height:182px; width:299px; top:0; left:0; opacity:1;
background:url(uploads/tx_dfimagemenu/{field:tx_dfimagemenu_menuimagehover}) 0 0 no-repeat;"
class="hover"></span>|
)
ATagParams.dataWrap (
style="position:relative; display:block; height:182px; width:299px; text-align:center;
background:url(uploads/tx_dfimagemenu/{field:tx_dfimagemenu_menuimage}) 0 0 no-repeat;"
class="fadeThis"
)
ATagTitle.field = abstract // description // subtitle // title
}
}