[TYPO3] click-enlarge icon over image

Bas van der Togt b.vandertogt at profinit.com
Thu Mar 30 09:56:44 CEST 2006


Franz,

This works just how i want it!
Thanks for your code.

Cheers, Bas

Franz Koch schreef:
> 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)
> 



More information about the TYPO3-english mailing list