Zum Inhalt springen

Verschiedene Backgroundimages

Erstellt am 30. Dezember 2008 · 4 Antworten · letzte Antwort am 31. Dezember 2008

Tags: Frage

pow ·

Jetzt ich nochmal 🙂

Was ist die kürzeste Variante wenn ich für jede Seite eine eigene IMAGE Grafik haben will:

#########################################
# BUTTON 1
#########################################
lib.mainmenu = COA
lib.mainmenu.1 = HMENU
lib.mainmenu.1{
special = list
special.value = 97
1 = GMENU
1.NO = 1
1.NO {
	XY = 160, 60
	wrap = <span style="padding:0;margin:0;padding-right:1px;display:inline">|</span>
	5 = IMAGE
	5.file = GIFBUILDER
	5.file {
		quality = 100
		format = png
		XY = 160, 60
		10 = IMAGE
		10.file = fileadmin/cssimages/button1.jpg
	}
	20 = TEXT
	20.text.field = title
	20.fontColor = #ffffff
	20.fontFile = fileadmin/fonts/arial.ttf
	20.fontSize = 12
	20.niceText = 0
	20.offset = 5, 15
}
 
1.RO < lib.mainmenu.1.NO
1.RO {
5.file = fileadmin/cssimages/button1_1.jpg
}

1.CUR < lib.mainmenu.1.NO
5.file = fileadmin/cssimages/button1_1.jpg
}
}

#########################################
# BUTTON 2
#########################################
lib.mainmenu.2 = HMENU
lib.mainmenu.2{
special = list
special.value = 83
1 = GMENU
1.NO = 1
1.NO {
	XY = 160, 60
	wrap = <span style="padding:0;margin:0;padding-right:1px;display:inline">|</span>
	5 = IMAGE
	5.file = GIFBUILDER
	5.file {
		quality = 100
		format = png
		XY = 160, 60
		10 = IMAGE
		10.file = fileadmin/cssimages/button2.jpg
	}
	20 = TEXT
	20.text.field = title
	20.fontColor = #ffffff
	20.fontFile = fileadmin/fonts/arial.ttf
	20.fontSize = 12
	20.niceText = 0
	20.offset = 5, 15
}
 
1.RO < lib.mainmenu.1.NO
1.RO {
5.file = fileadmin/cssimages/button2_1.jpg
}

1.CUR < lib.mainmenu.1.NO
5.file = fileadmin/cssimages/button2_1.jpg
}
}

Ist doch ein langer Code, und das nur für 2, wenn ich später 10 habe, was dann? 🙂
Was gibts für Abkürzungen? Bin nicht so TS fit.

Danke

freshman17 ·

Genau, optionSplit! Hier ein Beispiel mit zwei fixen Elementen.

...
1.NO {
  XY = 160, 60
  wrapItemAndSub (
    <span style="padding:0;margin:0;padding-right:1px;display:inline">|</span> ||
    <span style="padding:0;margin:0;padding-right:1px;display:inline">|</span> ||
    #...und so weiter
  )
  5 = IMAGE
...

Kannst auch in drei Teile splitten (links, mitte, rechts), die man wieder unterteilen kann usw.

wrap = <li>|</li> |*| <li>|</li> |*| <li>|</li>

Das COA-Object brauchst dann natürlich auch nicht mehr.

pow ·

Hm,...habs nun versucht.

#########################################
# BUTTON 1
#########################################
lib.mainmenu = HMENU
lib.mainmenu {
special = list
special.value = 97||83||82||81||78
1 = GMENU
1.NO = 1
1.NO {
	XY = 160, 60
	wrapItemAndSub (
	<span style="padding:0;margin:0;padding-right:1px;display:inline">|</span>||
	<span style="padding:0;margin:0;padding-right:1px;display:inline">|</span>||
	<span style="padding:0;margin:0;padding-right:1px;display:inline">|</span>||
	<span style="padding:0;margin:0;padding-right:1px;display:inline">|</span>||
	<span style="padding:0;margin:0;padding-right:1px;display:inline">|</span>||
	)
	5 = IMAGE
	5.file = GIFBUILDER
	5.file {
		quality = 100
		format = png
		XY = 160, 60
		10 = IMAGE
		10.file = fileadmin/cssimages/button1.jpg||fileadmin/cssimages/button2.jpg||fileadmin/cssimages/button3.jpg||fileadmin/cssimages/button4.jpg||fileadmin/cssimages/button5.jpg
	}
	20 = TEXT
	20.text.field = title
	20.fontColor = #ffffff
	20.fontFile = fileadmin/fonts/AGENCYR.TTF
	20.fontSize = 18
	20.niceText = 0
	20.antiAlias = 0
	20.offset = 2, 15
}
 
1.RO < lib.mainmenu.1.NO
1.RO {
5.file = fileadmin/cssimages/button1_1.jpg||fileadmin/cssimages/button2_1.jpg||fileadmin/cssimages/button3_1.jpg||fileadmin/cssimages/button4_1.jpg||fileadmin/cssimages/button5_1.jpg
}

1.CUR < lib.mainmenu.1.NO
1.CUR {
5.file = ffileadmin/cssimages/button1_2.jpg||fileadmin/cssimages/button2_2.jpg||fileadmin/cssimages/button3_2.jpg||fileadmin/cssimages/button4_2.jpg||fileadmin/cssimages/button5_2.jpg
}
}
}

...ist jedoch nicht ganz ausgereift 😉

freshman17 ·

Also kürzeste Variante ist:

1.

lib.mainmenu = HMENU
lib.mainmenu {
  1 = GMENU
  1 {
    NO = 1
    NO {
      wrap = <li class="myClass">|</li>
      /*
      und falls du jeden Punkt untertelen willst dann
      wrap (
        <li class="item1">|</li> ||
        <li class="item2">|</li> ||
        <li class="item3">|</li> ||
        <li class="item4">|</li> ||
      )
      */
      altImgResource.import = fileadmin/templates/menu/
      altImgResource.import.field = media
      altImgResource.import.listNum = 0
    }
    ACT < .NO
    ACT.altImgResource.import.listNum = 1
    RO < .NO
    RO.altImgResource.import.listNum = 2
  }
}

2.

deine Images in den Ordner legen, hier im Beispiel ist es fileadmin/templates/menu/

3.

Typo3 Version 4.2.x
Web->Liste->Item1->Seiteneigenschaften->Ressourcen->Dateien->Menüpunkt auswählen

Typo3 Version 4.1.7
Web->Liste->Item1->Seiteneigenschaften->Typ: Erweitert->Dateien->Menüpunkt auswählen

Das machst für jeden Menüpunkt und für jeden Zustand (hier im Beispiel normal, active, rollover).