[Typo3] header image replace techniques

[Christopher]

Hi again,

--- Rob De Vries <spam_this at pandora.be> wrote:

> Hey Chritsopher
> 
> Thnx for your reply, very intresting
> 
> > If anyone wants, I can post the TS for the new variant here or to
> the
> > newsgroup.
> 
> i would like that :)


Check the end of this message; I'll post it to the newsgroup thread
too.


> > By the way, I think the .gov extension does a variant of this, does
> it
> > not?
> 
> Don't know, i'm still looking for all the possebiletys
> 
> could you paste me the link to you previous post on this subject?
> 
> I think the dynamic CSS ext could provide me a solution to get the 
> styles in an exteranl css.
> I'll first look at your sollution and try to get it to work from
> there.
> 
> I'll keep you up-to-date on this one.
> 
> Greetz
> Rob
> 
> ps: nice site.


Thanks :)

Code follows (for a sample <h1>):

TYPOSCRIPT:
===============

lib.h1-gfx = COA
lib.h1-gfx {
  ### I can't think of a better way to accomplish this
  ### than to simply BUILD the tag, one bit at a time...  
  ### So first, open the tag, insert the title attribute etc...

  5 = TEXT
  5 { 
    current = 1
    insertData = 1 
    noTrimWrap = |<h1
title="{$constants.header.h1.gfx.titlePrefixValue}: |">|
  }

  ### Then, get the image file, and put it in the style attribute of a
<span>...
  10 = IMG_RESOURCE
  10.stdWrap.wrap = <span style="background:transparent url(|)
no-repeat top left"></span>
  10.file = GIFBUILDER
  10.file {
    maxWidth = {$constants.header.h1.gfx.maxWidth}
    backColor = {$constants.header.h1.gfx.background}
    transparentBackground = 0
    XY = 680,40

    5 = TEXT
    5 {
      text.field >
      text.current = 1
      fontSize = {$constants.header.h1.gfx.fontSize}
      fontColor = {$constants.header.h1.gfx.colour}
      offset = {$constants.header.h1.gfx.offset}
      align = {$constants.header.h1.gfx.align}
      fontFile = {$constants.header.h1.gfx.font}

      shadow {
        offset = {$constants.header.h1.gfx.shadow.offset}
        color = {$constants.header.h1.gfx.shadow.colour}
        blur = {$constants.header.h1.gfx.shadow.blur}
        opacity = {$constants.header.h1.gfx.shadow.opacity}
        intensity = {$constants.header.h1.gfx.shadow.intensity}
      }
    }
  }
  
  15 = TEXT
  15 {
    current = 1
    insertData = 1
    wrap = |</h1>
  }
}


CSS:
===============

h1 {
  background-color:#036;
  position:relative;
  width:100%;
  height:40px;
  overflow:hidden;
  
  line-height:40px;
  color:#fff;
}

h1 span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

(This is the 'cover up' technique shown at
http://www.stopdesign.com/articles/replace_text/)


-Christopher


		
__________________________________ 
Do you Yahoo!? 
Read only the mail you want - Yahoo! Mail SpamGuard. 
http://promotions.yahoo.com/new_mail