[TYPO3-german] Hover Bildtausch

[JoH asenau]

xy wrote:
> Hallo Joey,
> 
> vielen Dank für Deine Tipps. Ich habe Deinen Code so eigepflegt:
> 
>    10.marks {
>       # Insert top image parts
>       # Part 1
>       IMAGE_TOP_1 = IMAGE
>       IMAGE_TOP_2 = IMAGE
>       IMAGE_TOP_3 = IMAGE
>       IMAGE_TOP_4 = IMAGE
>       IMAGE_TOP_5 = IMAGE
> 
>       lib.images = TEXT
>       lib.images {
>         data = levelmedia:-1, slide
>         split {
>           token = ,
>           cObjNum = 1
>           1 = IMG_RESOURCE
>           1 {
>             file {
>               import = uploads/media/
>               import.current = 1
>     }
>           wrap = <a href="#" style="background:url(|) no-repeat top
> left;"></a>
>           }
>         }
>       }
> 
> Nur, werden jetzt gar keine Grafiken mehr geladen.
>
> Ich muss mich mehr in das Thema einlesen um Deinen Code überhaupt zu
> verstehen.

Scheint so ;-)
lib.images wäre ein eigenes Objekt, das Du dann einem einzelnen Marker zuweisen kannst

lib.image = TEXT
lib.image {
    #blah
}

10.subparts {
    MEIN_BILDBLOCK < lib.image
}

Du mußt das also außerhalb des restlichen Setups definieren.
Der Vorteil ist, daß Du das so auch separat in einem anderen Template tun kannst, das sich später komplett inkludieren läßt.
Das ist für die Strukturierung und eventuelle Teamarbeit an den Templates sinnvoll.

> Erzeugt Dein Code die Liste mit den Bildern mit Links? Also der von
> Dir 
> vorgeschlagene 2. Ansatz?

Der Code würde eine List von Links erzeugen, die keinen Text haben aber über Hintergrundbilder verfügen.
Wenn Du da noch eine class="imagelinks" oder so in den Wrap mit einbaust, kannst Du den Rest über CSS steuern.

> Und wenn ich die Bilder dann sehe, wie mach ich das mit den
> Graustufen? 

Da gibt's wieder verschiedene Varianten.
Die einfachst dürfte sein, daß Du die Höhe oder die Breite der Links per CSS festlegst und mit overflow:hidden dafür sorgst, daß der angezeigte Inhalt nicht größer werden kann.
Dann würde es reichen die Bilder "am Stück" so zu erzeugen, daß die farbige Version z.B. neben der Graustufen-Version liegt.

Das Ganze geht hervorragend mit GIFBUILDER, was Du am besten in der TSref nachlesen kannst.

Über die Klasse steuerst Du dann die Position des Hintergrunds.

.imagelinks {
    background-position:top left;
}

.imagelinks:hover {
    background-position:top right;
}

Und da es sich bei den HTML-Tags um "echte" Links handelt, müsste das sogar mit dem IE6 funktionieren.

HTH

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