[TYPO3-english] tt_content.image.20 rollover effect

[Bernhard Kraft]

Edgars wrote:
>  Hi, list!
>  Need you advice. I have a project, where I need to achieve a rollover
>  effect of tt_content images - the desaturated one, and on rollover -
>  in full color. So, I saw in archive multiple messages and questions
>  about GIFBUILDER rollover, and it seems like that's impossible. But
>  How about generating each image twice side by side? Is it possible?
>  Thanks in advance!


Hello !


Of course this is possible. If you can create desaturated images with GIFBUILDER and the default variant it is only a question of cleverly using the cObjects CASE, TEXT, etc. to get the wanted result.


The following script will change tt_content.20 to show a blurred one and the original when moving the mouse over:
----------------------------------------------------------------
tt_content.image.20.1.file >
tt_content.image.20.1.file = GIFBUILDER
tt_content.image.20.1.file {
	XY = [10.w],[10.h]
	format = jpg
	10 = IMAGE
	10 {
		file {
			import.current = 1
			width.field = imagewidth
		}
		offset = 0,0
	}
	20 = EFFECT
	20.value = blur=30
}

tt_content.image.20.rendering.simple.imgTagStdWrap {
	preCObject = LOAD_REGISTER
	preCObject {
		imgOver.cObject = IMAGE
		imgOver.cObject {
			file < tt_content.image.20.1.file
			file.20 >
		}
	}
	dataWrap = <div><div style="display: none;" id="image-over-{field:uid}-{register:IMAGE_NUM}" onmouseout="this.style.display = 'none'; document.getElementById('image-off-{field:uid}-{register:IMAGE_NUM}').style.display = 'block';">{register:imgOver}</div><div id="image-off-{field:uid}-{register:IMAGE_NUM}" onmouseover="this.style.display = 'none'; document.getElementById('image-over-{field:uid}-{register:IMAGE_NUM}').style.display = 'block';">|</div></div>
	append = RESTORE_REGISTER
}
----------------------------------------------------------------

Of course you can change the "blur" effect to another one.


greets,
Bernhard