Grafik in TMenu; aber Dateiname ins CSS schreiben [Gelöst]

  • thoko thoko
    Jedi-Ritter
    0 x
    134 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 08:49

    Hallo,

    ich sitze grade vor folgendem Problem:
    Es soll eine Navigation entstehen wie bspw. auf [url]http://www.ev-kirche-coswig.de/[/url] - horizontal angeordnet; der Link-Text auch wirklich als Text um zumindest barrierearm zu werden, obendrüber ein Bild (bevorzugt aus dem media-Feld der jeweiligen Seite) und bei Rollover soll das Bild dann "richtig" zu sehen sein, sonst so etwas überlagert.

    Der einfache Weg (der auch schon teilweise funktioniert) wäre jetzt, mit [TS]before.cObject = IMAGE[/TS] zu arbeiten und beide Bilder (normal + überlagert) einfach hochzuladen und fertig.
    Stufe zwei wäre, das überlagerte Bild per ImageMagick berechnen zu lassen - spart den armen Nutzern das rumopern im Grafikprogramm.

    Eigentlich wollte ich aber eine "schöne" Lösung, bei der nicht zwei Bilder pro Menüpunkt geladen werden - wenns richtig gemacht ist, sollte eigentlich ja eine Grafik + ein halbtransparentes GIF zum drüberlegen reichen 8-)

    Nun bleibt aber die Frage im Raum stehen: Wie mach' ich das, wie werfe ich dem DIV ein background-image per TS hin?
    Und das Zweite Problem: Wie definiere ich Höhe und Breite für das GIF (würde ich per beforeImg zuweisen) anhand der Größe des Bildes aus dem media-Feld?

    Irgendwie steh' ich grade ganz passabel auf'm Schlauch & seh' den Wald vor lauter Bäumen nicht... #angry#

    Vielen Dank schonmal für Eure Hinweise,

    Thomas


  • 1
  • ArminB ArminB
    Jedi-Meister
    0 x
    410 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 10:47

    moin,

    hast du denn schon eine Lösung erarbeitet wie der erezuegte Quelltext und das dazugehörige CSS aussehen soll? Dann poste mal.....

    Armin

  • thoko thoko
    Jedi-Ritter
    0 x
    134 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 18:32

    Jau, hab' ich:

    Die normale Ansicht würde sowas produzieren:
    [HTML]<li style="width:70px; background-image:url(/uploads/media/klinke_x.jpg);">
    <img src="fileadmin/Design/halbtransparent.gif" width="70" height="90" border="0" alt="" title="" /><br>
    <a href="133.html">Start</a>
    </li>
    [/HTML]

    Bei MouseOver (bzw. für die aktuelle Seite) sollte dann das hier rauskommen:

    [HTML]<li class="tb" style="width:70px; background-image:url(/uploads/media/klinke_x.jpg);">
    <a href="133.html">Start</a>
    </li>
    [/HTML]

    Wobei die Breiten- und Höhenangaben jeweils anhand des Bildes aus dem media-Feld bestimmt werden sollen.

    Zumindest wäre das eine recht elegante Lösung, auch wenn Bandbreite im Moment vielleicht nicht unbedingt das A und O ist - aber spätestens wenn Handys & Co verstärkt zum surfen genutzt werden wirds wieder spannend :)

    Viele Grüße,

    Thomas

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    20. 05. 2007, 18:47

    nicht so wirklich verstanden aber mit IMG_RESOURCE statt IMAGE bekommst du den Pfad zurück

    georg

  • thoko thoko
    Jedi-Ritter
    0 x
    134 Beiträge
    0 Hilfreiche Beiträge
    21. 05. 2007, 06:43

    Hi,

    bisher ist mein Menü ganz einfach:
    [TS]temp.MAINNAVIGATION = COA
    temp.MAINNAVIGATION.40 = HMENU
    temp.MAINNAVIGATION.40 {
    entryLevel = 0
    1 = TMENU
    1 {
    collapse = 0
    expAll = 1
    noBlur = 1
    NO = 1
    NO {
    allWrap = <li> | </li>
    ATagTitle.field = abstract // description // subtitle // title
    }
    CUR = 1
    CUR < NO
    }
    }
    [/TS]

    Jetzt muss ich "nur" irgendwie die Dateinamen und Größenangaben noch in den wrap reinbringen - IMG_RESOURCE sieht zwar schon gut aus, aber irgendwie krieg ich die Werte nicht sinnvoll da reingewrappt...

    Viele Grüße,
    Thomas

  • thoko thoko
    Jedi-Ritter
    0 x
    134 Beiträge
    0 Hilfreiche Beiträge
    23. 05. 2007, 17:37

    Ich hab nochmal probiert und gemacht, leider funktioniert das einfügen analog zu den Konstanten nicht:
    [TS]xxx.value = {$irgendeinekonstante}[/TS]

    Nur für grade frisch entstandene Variablen bekomme ich es nicht hin...

    Wenn irgendwer eine Idee hat - her damit!

    Vielen Dank,

    Thomas

  • fuss fuss
    Jedi-Meister
    0 x
    375 Beiträge
    0 Hilfreiche Beiträge
    26. 05. 2007, 12:38

    Olla!

    Warum so kompliziert? ;)

    Mein Ansatzpunkt wäre, mit stdWrap.prepend = COA (innerhalb der NO Definition) zu arbeiten. Da packst Du Dir Deine beiden Bilder rein, das eine (oder beide) aus dem media field und das andere hardcoded. Dann bekommt das erste Bild class="hover" und das zweite class="normal". Das CSS sollte dann wie folgt aussehen:

    [HTML]/* normal view */
    #navmain li a img.normal {
    display: block;
    }
    #navmain li a img.hover {
    display: none;
    }

    /* hover view */
    #navmain li a:hover img.normal {
    display: none;
    }
    #navmain li a:hover img.hover {
    display: block;[/HTML]

    Somit wird bei hover einfach zwischen den beiden Bildern umgeschaltet.
    Alternativ kann man sich natürlich auch noch ein a.active definieren, welches dann z.B. genau so wie der hover Effekt aussehen könnte.

    gruss, fuss

    my system:
    C-64 I, 65816@20mhz, 16mb ram, 4x 6581r4 (12 channel fm-sound), 384mb scsi hd
    go sixtyfour! go!

  • thoko thoko
    Jedi-Ritter
    0 x
    134 Beiträge
    0 Hilfreiche Beiträge
    26. 05. 2007, 16:30

    Nein, genau das will ich ja (wenn's geht) vermeiden - ich will den lieben Nützlingen nicht wirklich zumuten (oder eher zutrauen? ;) ), zwei Bilder zu erstellen. Das "klare" (ohne Überlagerung) ist ja ok, aber um das teilweise überlagerte hinzubekommen müssten ja alle ein vernünftiges Programm haben. Außerdem wäre dann ja der Effekt weg - man müsste statt $foo+1 ($foo=Seitenanzahl in der Navigation + 1x das zum Überlagern) dann nämlich 2x$foo Bilder laden.

    Um das umzusetzen könnte ich dann ja noch eher den GIFBUILDER nutzen...

    Aber ich bin scharf dran - wenns klappt, melde ich mich heute nochmal...

    Trotzdem Danke,

    Thomas

  • thoko thoko
    Jedi-Ritter
    0 x
    134 Beiträge
    0 Hilfreiche Beiträge
    26. 05. 2007, 21:06

    Heureka - es ist vollbracht.

    Nochmal für die Nachwelt das Ziel als Kurzfassung:
    - Barrierearmes Textmenü (u.a. Aufbau als unsortierte Liste)
    - Zu jedem Menüpunkt gehört ein individuelles Bild
    - solange die Seite nicht die aktive ist (bzw. keine Unterseite aktiv ist) soll die Grafik mit einer anderen Grafik (GIF; jedes zweite Pixel ist transparent) überlagert werden
    - möglichst wenige Grafiken generieren/laden

    Die Lösung? Einfach die neuesten Typo3-Möglichkeiten nutzen. Analog zu [TS]TSFE:lastImageInfo[/TS] gibt es jetzt auch [TS]TSFE:lastImgResourceInfo[/TS] - und damit die Möglichkeit, genau die dafür benötigten Werte auszugeben...

    [TS]temp.MAINNAVIGATION = COA

    temp.MAINNAVIGATION.40 = HMENU
    temp.MAINNAVIGATION.40 {
    entryLevel = 0
    1 = TMENU
    1 {
    collapse = 0
    expAll = 1
    noBlur = 1
    NO = 1
    NO {
    allWrap = | <span class="unsichtbar"> . </span></li>
    insertData = 1
    #Den Link bauen wir selber, um die Struktur besser in Griff zu bekommen und Darstellungsfehler zu reduzieren
    doNotLinkIt = 1
    # Den gesamten Wrap bauen wir erstmal selber auf...
    stdWrap.cObject = COA
    stdWrap.cObject {
    # Öffnendes <li>; inklusive Einbau der Background-Grafik
    5 = COA
    5 {
    5 = TEXT
    5.value = <li style="background-image:url(/
    # schreibt den Dateinamen weg
    10 = IMG_RESOURCE
    10 {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 1
    file.height = 90
    stdWrap.wrap = |);
    }
    15 = TEXT
    15.value = width:
    # Feld 0: Breite
    20 = TEXT
    20.data = TSFE:lastImgResourceInfo|0
    25 = TEXT
    25.value = px;">
    }
    # hier beginnt der Link - den wir selber bauen, um ihn in das <li> reinzubekommen
    10 = TEXT
    10 {
    field = abstract // description // subtitle // title
    typolink {
    parameter.field = uid
    returnLast = url
    }
    wrap = <a href="|" title="
    insertData = 1
    }
    # jedes A-Tag hat ein Recht auf ein title-Attribut
    11 = TEXT
    11 {
    field = abstract // description // subtitle // title
    wrap = |">
    insertData = 1
    }
    # Jetzt legen wir die teiltransparente Grafik als IMG drüber:
    20 = COA
    20 {
    5 = TEXT
    5.value =<img src="/fileadmin/kdl/Design/semitrans3.gif" width="

    10 = TEXT
    10.data = TSFE:lastImgResourceInfo|0

    15 = TEXT
    15.value = " height="
    # Höhe und Breite nicht vergessen, da das Bild u.U. skaliert werden muss, wenn die Bilder nicht auf jede Seite die gleiche Größe haben
    20 = TEXT
    20.data = TSFE:lastImgResourceInfo|1

    25 = TEXT
    25.value = " style="border-width:0px;margin-left:0px;padding-left:0px;" />
    }

    29 = TEXT
    29.value = <br />
    # Den Text wollen wir ja auch noch ausgeben - bevorzugt natürlich den Navigationstitel!
    30 = TEXT
    30 {
    field = nav_title // title
    wrap = | </a>
    insertData = 1
    }
    }
    }
    # Wenn es die aktive Seite ist: andere CSS-Klasse und Überlagerung mit einem blind GIF
    CUR = 1
    CUR < .NO
    CUR.stdWrap.cObject.5.5.value = <li class="active" style="background-image:url(/
    CUR.stdWrap.cObject.20.5.value = <img src="/fileadmin/kdl/Design/blank.gif" width="

    # Wenn eine Unterseite aktiv ist: Ebenfalls keine Überlagerung
    ACTIFUSB = 1
    ACTIFSUB < .CUR
    }
    }[/TS]

    Jetzt fehlt bloß noch der goldene Henkel - die Bilder brauchen noch ein sinnvolles ALT-Tag.

    Um es ganz hypsch zu machen kann man natürlich noch eine zweite Grafik als blind gif reinbauen, standardmäßig verstecken, per CSS und Pseudoklasse HOVER dann einblenden und die überlagerte Grafik wegblenden (TMENUs kennen ja kein RO).
    Kann man machen, ja, aber irgendwie scheinen manche Browser dann nicht so wirklich zu verstehn was man will - bei mir flackert im Firefox dann immer das Bild so komisch; in Opera klappt es... :'(

    Aber egal - wieder was gfelernt und ein gutes Stück weiter.

    Viele Grüße & noch ein schönes Pfingstwochenende wünscht

    Thomas

  • mfgiesen mfgiesen
    Padawan
    0 x
    28 Beiträge
    0 Hilfreiche Beiträge
    08. 08. 2008, 17:21

    Das ist ja absolut der Hammer!!

    Klappt das auch mit mehrsprachigen Seiten?

  • 1