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

[JoH asenau]

>   Thanks for answering, and yes, you got it! I need a resized rollover
>  images for tt_content (b&w image / colored on the rollover) and with
>  click enlargment. Absolutely correct. Quite an unusual case in my
>  experience with TYPO3, but search ended unsuccessfully for any useful
>  snippet.

So actually your IMAGE element will behave just like the default with one
addition: There will be another image visible as long as the mouse is not
hovering the image - and this will be a grayscale version of exactly the
same image as the colored one.

This could be done with a few lines of TS appended to the original IMAGE
element using stdWrap functions together with some CSS positioning.

This TS snippet will append a grayscale version of the image that has just
been created before.

tt_content.image.20.1.stdWrap.append = COA
tt_content.image.20.1.stdWrap.append {
  10 = IMAGE
  10 {
    file = GIFBUILDER
    file {
      XY = [10.w],[10.h]
      10 = IMAGE
      10.file.import.data = TSFE:lastImageInfo|3
      20 = EFFECT
      20.value = gray
    }
    params = class="grayscale"
  }
}

The information is contained in the array TSFE:lastImageInfo
0 is the width,
1 the height,
2 the type and
3 the URL.

We just have to make sure the image we produce has the same width and height
as the original, so it'll be enough to use the URL, since this will be the
ready made image with width and height already calculated.
We append a new image to the original code, convert it to grayscale using
GIFBUILDER and add a classname to give it some special positioning later on.

The CSS is based on the assumption that you are using CSS-styled-content:

# this is the default container of each image
# it has to get relative positioning to get inside
# absolute positioning relative to its upper left corner
dl.csc-textpic-image {
  position:relative;
}

# this is the grayscale overlay
# that will be visible by default
dl.csc-textpic-image img.grayscale {
  position:absolute;
  left:0px;
  top:0px;
  display:block;
}

# and it will be removed when the mouse
# hovers the container
dl.csc-textpic-image:hover img.grayscale {
  display:none;
}

Click enlargment is left untouched and works just as usual.
http://ice.4any1.de/index.php?id=15958

HTH

Joey

BTW: For the guys and girls who are running the snippet collections and
TypoScript related blogs or the like - would be nice if you could add the
credits for this snippet when copying it from here or other sources ... and
while you are at it, maybe you could add them for those you already used as
well ;-)

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your gob sometimes!)
Dieter Nuhr, German comedian
Xing: http://contact.cybercraft.de
Twitter: http://twitter.com/bunnyfield
TYPO3 cookbook (2nd edition): http://www.typo3experts.com