---
title: "2 Bilder (thumb/normal) automatisch generieren - mit Javascript Bildertausch"
url: "https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Bilder","Frage"]
created: "2007-09-25"
last_reply: "2007-09-27"
replies: 10
solved: false
page: 1
pages: 1
lang: "de"
---

# 2 Bilder (thumb/normal) automatisch generieren - mit Javascript Bildertausch

TYPO3 › TypoScript · 10 Antworten · gestartet 2007-09-25

## Eröffnungsbeitrag

**rabe69** · 2007-09-25 · [Beitrag #1](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/1)

Hi,
Wie ist es möglich aus der Übergabe von einem Bild zwei Bilder zu erzeugen, wobei nur eines angezeigt werden soll, dieses aber mit einem Javascript-Mouseover das andere Bild an einer bestimmten Stelle anzeigen soll?
Das ganze soll in Templavoila funzen, d.h. das Bild wird über das Form des Flexiblen Content Elements übergeben.
Ich habe dazu folgendes probiert (Auschnitt aus der TemplaVoilà Datenstruktur des FCE's):

```typoscript
lib.image2 = IMG_RESOURCE
lib.image2.file = GIFBUILDER
lib.image2.file {
	format = jpg
	quality = 90
	XY = 424,300
	10 = IMAGE
	10.file.import = uploads/tx_templavoila/
	10.file.import.current = 1
	10.file.import.listNum = 0
	10.file.maxW = 424
	10.file.minW = 424
	10.file.maxH = 300
	10.file.minH = 300
}
10 = IMAGE
10.file = GIFBUILDER
10.file {
	format = jpg
	quality = 90
	XY = 88,60
	10 = IMAGE
	10.file.import = uploads/tx_templavoila/
	10.file.import.current = 1
	10.file.import.listNum = 0
	10.file.maxW = 88
	10.file.minW = 88
	10.file.maxH = 60
	10.file.minH = 60
}
10.imageLinkWrap = 1
10.imageLinkWrap.enable = 1
10.imageLinkWrap.typolink.parameter = javascript:;
10.imageLinkWrap.typolink.ATagParams < lib.image2
10.imageLinkWrap.typolink.ATagParams.stdWrap.wrap = onmouseover="MM_swapImage('mainimage','','|',1)" onmouseout="MM_swapImgRestore()"
```

Es wird aber nur 'IMG_RESOURCE' statt des Namens des generierten lib.image2 ausgegeben:

```html
<a href="javascript:;" target="_top" onmouseover="MM_swapImage('mainimage','','IMG_RESOURCE',1)" onmouseout="MM_swapImgRestore()"><img src="typo3temp/GB/ed3ed3a660.jpg" width="88" height="60" border="0" alt="" title="" />
</a>
```

Hat da einer ne Idee?
Ich habe es auch schon mal ohne typolink, direkt mit 10.params < lib.image2 und anschliessendem 10.params.stdWrap.wrap, ist aber das selbe in grün.

## Antworten

### [#2](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/2) · just2b · 2007-09-25

bau das doch in nem COA zusammen

```typoscript
temp.img = COA
temp.img {
10 < temp.img2
10.wrap= <img src="|"

20 < temp.img2
20.wrap= onmouseover="changeimg('|'..

}
```

als idee sollte das reichen

georg

### [#3](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/3) · rabe69 · 2007-09-26

Hi just2be,
vielen Dank für diesen "Hint", das hat geklappt  :p
Hier für alle anderen die vielleicht auch mal so was machen wollen:

```typoscript
temp.image2 = IMG_RESOURCE
temp.image2.file = GIFBUILDER
temp.image2.file {
	format = jpg
	quality = 90
	XY = 424,300
	10 = IMAGE
	10.file.import = uploads/tx_templavoila/
	10.file.import.current = 1
	10.file.import.listNum = 0
	10.file.maxW = 424
	10.file.minW = 424
	10.file.maxH = 300
	10.file.minH = 300
}
temp.imageThumb2 = IMG_RESOURCE
temp.imageThumb2.file = GIFBUILDER
temp.imageThumb2.file {
	format = jpg
	quality = 90
	XY = 88,60
	10 = IMAGE
	10.file.import = uploads/tx_templavoila/
	10.file.import.current = 1
	10.file.import.listNum = 0
	10.file.maxW = 88
	10.file.minW = 88
	10.file.maxH = 60
	10.file.minH = 60
}
temp.imageTag2 = COA
temp.imageTag2 {
    10 = TEXT
    10.value = <img src="
    15 = TEXT
    15 < temp.imageThumb2
    20 = TEXT
    20.value = " onmouseover="MM_swapImage('mainimage','','
    25 = TEXT
    25 < temp.image2
    30 = TEXT
    30.value = ',1)" onmouseout="MM_swapImgRestore()" alt="" />
}
10 = TEXT
10 < temp.imageTag2
```

Wenn man das ganze in einer TemplaVoilà Datenstruktur nutzen will, muss man den ganzen Block innerhalb <TypoScript> mit <![CDATA[ ..... ]]> umschliessen.

### [#4](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/4) · just2b · 2007-09-26

bei

```typoscript
10 = TEXT
10 < temp.imageTag2
```

ist 1. zeile sinnlos, du überschreibst es sowieso dann

lg georg
ps: mein nick ohne 'e' ;)

### [#5](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/5) · rabe69 · 2007-09-26

Würde es dann auch so gehen?

```typoscript
temp.imageTag2 = COA
temp.imageTag2 {
  10 < temp.imageThumb2
  10.value = <img src="|"
  20 < temp.image2
  20.value = onmouseover="MM_swapImage('mainimage','','|',1)" onmouseout="MM_swapImgRestore()" alt="" />
}
10 < temp.imageTag2
```

### [#6](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/6) · just2b · 2007-09-26

sollte schon ja

mit der zuweisung weist du ja auch das cObj, in dem Fall "TEXT" zu.

georg

### [#7](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/7) · rabe69 · 2007-09-26

Ich meinte den gesamten Block
statt:

```typoscript
temp.imageTag2 = COA
temp.imageTag2 {
  10 = TEXT
  10.value = <img src="
  15 = TEXT
  15 < temp.imageThumb2
  20 = TEXT
  20.value = " onmouseover="MM_swapImage('mainimage','','
  25 = TEXT
  25 < temp.image2
  30 = TEXT
  30.value = ',1)" onmouseout="MM_swapImgRestore()" alt="" />
}
10 < temp.imageTag2
```

So:

```typoscript
temp.imageTag2 = COA
temp.imageTag2 {
  10 < temp.imageThumb2
  10.value = <img src="|"
  20 < temp.image2
  20.value = onmouseover="MM_swapImage('mainimage','','|',1)" onmouseout="MM_swapImgRestore()" alt="" />
}
10 < temp.imageTag2
```

### [#8](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/8) · just2b · 2007-09-26

nö das ist blödsinn!
entweder du machst eine Zuweisung **oder** du spezifizierst es selbst.

also

```typoscript
10 = TEXT
10.value = bla
15 < temp.foo
```

georg

### [#9](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/9) · rabe69 · 2007-09-26

Hi just2b,
du hattest es so in deinem ersten Post beschrieben ;)
Hätte mich auch gewundert, wenn das so gegangen wäre.
Auf jeden Fall hat es mich aber auf die richtige "Fährte" gebracht.

Nochmals vielen Dank!

### [#10](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/10) · just2b · 2007-09-26

aja sorry, da hab ich mich wohl etwas verschrieben, hab das oben ausgebessert so wie ich das gedacht hätte

georg

### [#11](https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch/11) · rabe69 · 2007-09-27

Hier noch mal die "Finale" Version:

```typoscript
temp.image = IMG_RESOURCE
temp.image.file = GIFBUILDER
temp.image.file {
  format = jpg
  quality = 90
  XY = 424,300
  10 = IMAGE
  10.file.import = uploads/tx_templavoila/
  10.file.import.current = 1
  10.file.import.listNum = 0
  10.file.maxW = 424
  10.file.minW = 424
  10.file.maxH = 300
  10.file.minH = 300
}
temp.imageThumb = IMG_RESOURCE
temp.imageThumb.file = GIFBUILDER
temp.imageThumb.file {
  format = jpg
  quality = 90
  XY = 88,60
  10 = IMAGE
  10.file.import = uploads/tx_templavoila/
  10.file.import.current = 1
  10.file.import.listNum = 0
  10.file.maxW = 88
  10.file.minW = 88
  10.file.maxH = 60
  10.file.minH = 60
}
temp.imageTag = COA
temp.imageTag {
  10 < temp.imageThumb
  10.wrap = <img src="|" 
  20 < temp.image
  20.wrap = onmouseover="MM_swapImage('mainimage','','|',1)" onmouseout="MM_swapImgRestore()" alt="" />
}
10 < temp.imageTag
```

"mainimage" ist übrigens die ID des Bildes, welches bei RollOver ausgetauscht werden soll. Die Javascript-Funktionen sind vom Adobe Dreamweaver.

---

Quelle: „2 Bilder (thumb/normal) automatisch generieren - mit Javascript Bildertausch“, typo3.net, https://www.typo3.net/d/68580-2-bilder-thumbnormal-automatisch-generieren-mit-javascript-bildertausch
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.