---
title: "Verschiedene Backgroundimages"
url: "https://www.typo3.net/d/85378-verschiedene-backgroundimages"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2008-12-30"
last_reply: "2008-12-31"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# Verschiedene Backgroundimages

TYPO3 › Menüs · 4 Antworten · gestartet 2008-12-30

## Eröffnungsbeitrag

**pow** · 2008-12-30 · [Beitrag #1](https://www.typo3.net/d/85378-verschiedene-backgroundimages/1)

Jetzt ich nochmal :)

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

```typoscript
#########################################
# 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

## Antworten

### [#2](https://www.typo3.net/d/85378-verschiedene-backgroundimages/2) · jan_0815 · 2008-12-31

Option Split vielleicht?

#
              10 = IMAGE
#
                10.file = fileadmin/cssimages/button1.jpg || fileadmin/cssimages/button2.jpg

<https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Functions/OptionSplit.html>

### [#3](https://www.typo3.net/d/85378-verschiedene-backgroundimages/3) · freshman17 · 2008-12-31

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

```typoscript
...
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.

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

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

### [#4](https://www.typo3.net/d/85378-verschiedene-backgroundimages/4) · pow · 2008-12-31

Hm,...habs nun versucht.

```typoscript
#########################################
# 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 ;)

### [#5](https://www.typo3.net/d/85378-verschiedene-backgroundimages/5) · freshman17 · 2008-12-31

Also kürzeste Variante ist:

1.

```typoscript
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).

---

Quelle: „Verschiedene Backgroundimages“, typo3.net, https://www.typo3.net/d/85378-verschiedene-backgroundimages
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.