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

[JoH asenau]

> But it seems the CSS I posted doesn't work in IE8 as well, so I guess
> it still needs some bugfixing.
> Will take a look at it ...

Here we go with the "universal" version.
Split kicks the closing </a> Tag
innerWrap generates an anchor when there's no link and no click enlargement.
outerWrap gives a closing </a> after the second image.

tt_content.image.20.1.stdWrap {
  split {
    token = </a>
    cObjNum = 1
    1.current = 1
  }
  innerWrap = <a href="#">|
  innerWrap.if.isFalse.dataWrap = {field:image_zoom}{field:image_link}
  postCObject = COA
  postCObject {
    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"
    }
  }

  outerWrap = |</a>
}

dl.csc-textpic-image a {
  position:relative;
  display:block;
  background:none;
}

dl.csc-textpic-image a img.grayscale {
  position:absolute;
  left:0px;
  top:0px;
  display:block;
}

dl.csc-textpic-image a:hover {
  background:#CCC;
}

dl.csc-textpic-image a:hover img.grayscale {
  left:-10000px;
}

The background change is necessary to have IE6 redraw the content of the
A-Tag.
Tested and working.

Cheers

Joey

-- 
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