[TYPO3] click-enlarge icon over image

Franz Koch typo3 at fx-graefix.de
Tue Mar 28 13:07:59 CEST 2006


Hi Bas?
> I searched the whole internet and posted a few quetions but with no answer.
> 
> Is it possible to put an icon over an image, if there's an enlarged 
> version of that picture?

Jepp, that is possible and not very difficult - I use it on alsmost 
every typo3-project. What I do is to append on clickEnlarged images a 
little container with icon in it and define a negative 'margin-top' 
inside my CSS file. Works great, besides that the icon itself is not 
clickable.

Here is my code:
--CONSTANTS-------------------
template.clickEnlarge = |<span class="clickenlarge"><img 
src="path/to/icon.gif" /></span>
--TS--------------------------
tt_content.image.20 {
	1 {
		stdWrap.innerWrap = {$template.clickEnlarge}
		stdWrap.innerWrap {
			if.isTrue.field = image_zoom
   			ifEmpty.field = image_link
   		}
	}
--CSS--------------------------
.clickenlarge {
	display: block;
	text-align: right;
	padding: 0px 4px;
	margin-top: -2em;
	height: 2em;
}
.clickenlarge img {
	border: 0px !important;
}
-------------------------------
works with 'csc' as well as the good old 'content default'

And that's it :)

Here is a live example (german):
<http://www.elements-net.de/leistungsbereiche/business_it/angebote/acer_scaleo_ta.html#ce64>
(reminder to myself: update website and create a nicer icon)

-- 
Kind regards,
Franz Koch



More information about the TYPO3-english mailing list