Bilderchen im Menü wechseln bei MouseOver? Wie macht man denn das? Und wo pflegt man die Bilder ein?
TypoScript
- lib.mainMenu = HMENU
- lib.mainMenu.entryLevel = 0
- lib.mainMenu.wrap = |
- lib.mainMenu {
- 1 = TMENU
- 1 {
- noBlur = 1
- NO {
- allWrap = <li>|</li>
- linkWrap = <span class=”linktitle”>|</span>
- beforeImg = GIFBUILDER
- beforeImg {
- format = jpg
- quality = 100
- XY = [10.w],[10.h]
- 10 = IMAGE
- 10.file {
- # import of levelmedia – works
- import = uploads/media/
- import.field = media
- import.listNum = 0
- }
- }
- RO = 1
- beforeROImg < .beforeImg
- beforeROImg.10.file.import.listNum = 1
- beforeImgLink = 1
- }
- ACT = 1
- ACT {
- allWrap = |
- linkWrap = <span class=”linktitle”>|</span>
- beforeImg {
- # import of levelmedia – works
- import = uploads/media/
- import.field = media
- import.listNum = 1
- }
- beforeImgLink = 1
- }
- }
- }
Das TS sieht relativ komplex aus, ist aber recht simpel.
Wir erstellen zunächst ein normales TMENU (Zeilen 1-8). Ab Zeile 9 wird es jetzt langsam spannend. Hier definieren wir zunächst den Normalzustand (NO). Mit allWrap (10:) wrappen wir den gesamten Menüeintrag. linkWrap (11:) dagegen wrapt nur den Linktext ohne das nachher noch hinzuzufügende Bild.
Ab Zeile 12ff basteln wir uns das Bild in das Menü mit rein.
beforeImg (12:) setzt vor dem Menütext ein Bild. Wir erstellen hier ein neues Bild mit dem GIFBUILDER. Dabei gelten für uns folgende Parameter:
14: Das Bild ist ein JPG mit der Qualität von 100 (15:). Die Größe des Bildes soll aus dem hochgeladenen Bild später selber bestimmt werden (XY auf Zeile 16:).
Resourcen einer TYPO3-Seite
Ab Zeile 17: holen wir uns nun das Bild. Das ist von TYPO3 natürlich in das Verzeichnis uploads/media/ (20:) geladen worden. Um welches Bild es sich handelt, bestimmen wir in den Zeilen 21f. Aus dem Feld media der Seite (21:) laden wir das Bild, das ganz oben an erster Stelle steht (22:)
Dann soll es ja auch noch einen RollOver-Effekt geben. Den bestimmen wir mit RO in Zeile 25. Aber ACHTUNG!! Dieses RO ist NICHT(!) das RO der MENÜ-Stati. Es ist noch innerhalb von NO positioniert.
Mit beforeROImg (26:) definieren wir das Bild, das wir beim RollOver laden wollen. Da übernehmen wir die gleichen Einstellungen wie von beforeImg. Nur das Bild selber tauschen wir aus (27:). Dabei holen wir uns aus dem gleichen Feld aus Zeile 21: das zweite Bild, das dort abgelegt wurde.
Und natürlich wollen wir auch, dass das Bild selber ebenfalls verlinkt wird. beforeImgLink = 1 (28:).
In den Zeilen 30-41 definieren wir den ACT-Status. Ein eigener RO-Status ist ja nun nicht mehr nötig.
