Zum Inhalt springen

grafisches Menü mit verschiedenen Bildern

Erstellt am 8. Dezember 2006 · 43 Antworten · letzte Antwort am 28. März 2007 · Seite 1 von 3

Tags: Bilder, Frage

fellfresse ·

Hallo,
ich versuche gerade eine grafisches Menu zu bauen, wo die Links mit einem Bild versehen werden. Das Problem daran, jeder Link soll ein anderes Bild zugewiesen bekommen.

Wie kann ich das machen?
Ne suche hat bisher nix ergeben

fellfresse ·

danke für deine antwort!
ich habe das jetzt mal umgesetzt, doch leider werden nur weiße grafiken angezeigt.

tmp.Obere_Navigation = HMENU
tmp.Obere_Navigation {
  wrap = <img src="fileadmin/images/dummy.gif" width="25" height="1" border="0" alt="">|
  special = directory
  special.value = 1
  1 = GMENU
  1.NO = 1
  1.NO {       
    10 = IMAGE
    10 {
      file.import.field = media
      file.import = fileadmin/images/fb_navigation
      file.import.listNum = 0
    }
    XY = 51,51
    wrap = |<img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt="">
    noBlur = 1
  }
  RO < .NO
  RO = 2
  RO {
    10.file.import.listNum = 1
  }
  CUR < .RO
}

ne ahnung woran das liegen kann?

fellfresse ·

ich bin ein kleines stück weiter gekommen.
habe im TS folgendes eingefügt:

page.5 = TEXT
page.5.debugMode = 1

dort bekomme ich nun endlich meine grafiken als media angezeigt, die ich im erweiterten page-header als ressource angehängt habe.

doch darunter kommt noch folgende fehlermeldung:
Warning: Cannot modify header information.../tslib/class.tslib_content.php:3311) in ... /cms/tslib/class.tslib_fe.php on line 2853

kann diese fehlermeldung der grund sein das die grafiken im menu nicht angezeigt werden?

fellfresse ·

tja leider bringt mich das auch nicht weiter.
es wird weiterhin nur eine weisses kästchen pro eintrag erzeugt, aber keine bilder?!?!?!

d.​walter ·

Kann man sich das irgendwo mal anschauen? Das ausgegebenen HTML wäre noch interessant.

Wenn du dir das hier anschaust kommst du vielleicht dann auch weiter.

http://phpfi.com/155871

Imo ist das hier nicht richtig.

wrap = |<img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt="">
    noBlur = 1

Gruß

Daniel

fellfresse ·

na ob ich die grafik sofort angebe oder über den import einer variablen mache is doch egal.
das haut nämlich hin mit der seperator-grafik.

nein anschauen is leider noch nicht drin. habe das ganze zur zeit noch lokal laufen, da das in ein bestehendes system eingefügt werden muss, und wenn ich das einfüge dann muss das sofort funktionieren.

aber das erzeugte html is folgendes:

<!-- obere Navigation - begin -->						
<tr height="70">
<td>
###ab hier wird von typo3 ersetzt###	
						<img src="fileadmin/images/dummy.gif" width="25" height="1" border="0" alt=""><a href="index.php?id=24" onfocus="blurLink(this);"><img src="typo3temp/menu/cf4615d0ae.gif" width="51" height="51" border="0" alt="Multimediatechnik" /></a><img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt=""><a href="index.php?id=22" onfocus="blurLink(this);"><img src="typo3temp/menu/cf4615d0ae.gif" width="51" height="51" border="0" alt="Verfahrens- und Umwelttechnik" /></a><img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt=""><a href="index.php?id=3" onfocus="blurLink(this);"><img src="typo3temp/menu/cf4615d0ae.gif" width="51" height="51" border="0" alt="Bauingeneurwesen" /></a><img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt=""><a href="index.php?id=2" onfocus="blurLink(this);"><img src="typo3temp/menu/cf4615d0ae.gif" width="51" height="51" border="0" alt="Seefahrt" /></a><img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt=""><a href="index.php?id=23" onfocus="blurLink(this);"><img src="typo3temp/menu/cf4615d0ae.gif" width="51" height="51" border="0" alt="Maschinenbau" /></a><img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt=""><a href="index.php?id=5" onfocus="blurLink(this);"><img src="typo3temp/menu/cf4615d0ae.gif" width="51" height="51" border="0" alt="Elektrotechnik" /></a><img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt=""><a href="index.php?id=21" onfocus="blurLink(this);"><img src="typo3temp/menu/cf4615d0ae.gif" width="51" height="51" border="0" alt="Verkehrswesen" /></a><img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt="">	
					
###bis hier wird von typo3 ersetzt###
</td>
</tr>
<!-- obere Navigation - end -->
Unbekannter Benutzer ·

1. Bist du sicher, das bei dir lokal auch ImageMagick läuft? (Mal im Install-Tool die Grafiktests laufen lassen).

2. Sind die Bilder wirklich auch 51x51 Pixel groß, sonst bekommst du nämlich nur einen Ausschnitt zu sehen, der ja vielleicht weiß ist...

3. mach daraus:

file.import = fileadmin/images/fb_navigation

sicherheitshalber mal ein:

file.import = fileadmin/images/fb_navigation/

oder direkt:

file.import = uploads/media/

Viele Grüße

Christian

fellfresse ·

1. ja IM funkioniert, ich erstelle an anderer stelle ja schon eine andere grafik aus verschiedenen teilgrafiken.

2. die bilder die ich verwenden möchte sind im original auch nur 51x51 groß, wenn ich das im typoscript nicht nochmal explizit angebe, dann wird die grafik unförmig.

3. die veränderung des pfades ändert das ergebnis nicht.

hier mal ein screenshot wie es derzeit aussieht:

http://fellfresse2.fe.ohost.de/Bildschirmfoto.png

(hab das mit img leider nicht hinbekommen)

fellfresse ·

ok, anscheinend hat die pfadänderung mit dem abschliessenden / doch was gebracht.
nun bekomme ich doch die ersten bilder angezeigt. (hatte noch was mit beforeimg da stehen und habe es nun wieder auf file geändert)

aber das rollover funzt noch nicht

hier noch mal das ts:

tmp.Obere_Navigation = HMENU
tmp.Obere_Navigation {
  wrap = <img src="fileadmin/images/dummy.gif" width="25" height="1" border="0" alt="">|
  special = directory
  special.value = 1
  1 = GMENU
  1.NO = 1
  1.NO {       
    10 = IMAGE
    10 {
      file.import.field = media
      file.import = fileadmin/images/fb_navigation/
      file.import.listNum = 0
    }
    XY = 51,51
    backColor = #ec0f0f
    # transparentBackground = 1
    wrap = |<img src="fileadmin/images/dummy.gif" width="10" height="1" border="0" alt="">
    noBlur = 1
  }
  RO < .NO
  RO = 2
  RO {
    10.file.import.listNum = 1
  }
  CUR < .RO
}
fellfresse ·

leider war das nicht die lösung.

RO < .NO
  RO = 1
  RO {
    10.file.import.listNum = 1
  }
  CUR < .RO

ein rollover oder cur zustand is aber noch nich zu sehen...

fellfresse ·

nun endlich ist es geschafft:

  1.RO < .1.NO
  1.RO {
    10.file.import.listNum = 1
  }
  1.CUR < .1.RO

danke an alle mitwirkenden!

typoclau ·

Hallo,

ich sitze nun schon länger an diesem Menü mit Bildern #paralyzed#

Da diese Thematik ja nicht neu ist, ich diese aber zum ersten Mal nutze, hoffe ich, Ihr habt einen Tip für mich.

Anfangs habe ich diesen Code genutzt:

NAVI = HMENU
NAVI.entryLevel = -1
NAVI.special = directory

NAVI.special.value = 1
NAVI.1 = GMENU
NAVI.1.NO {

ATagTitle.field = title

noBlur = 1

altImgResource.import = {$menpath}
altImgResource.import.field = media
file.import = fileadmin/Doris/images/
altImgResource.import.listNum = 0
wrap = | 

}
NAVI.1.RO {
noBlur = 1

altImgResource.import = {$menpath}
altImgResource.import.field = media
altImgResource.import.listNum = 1
wrap = | 

}

die Bilder werden weiss angezeigt, hier habe ich wohl immer noch Probleme mit den Pfadangaben - $menpath ist bei mir im template bei constants:

# Pfad zu den Menu Grafiken
menpath = uploads/

Muss ich nun auf jeder Seite ein ext-Templ. einrichten und das Menü überschreiben (bzw. den special.value dann entsprechend der ID setzen?

Gruß & danke schonmal

typoclau ·

Auch bei diesem Versuch

NAVI = HMENU
NAVI {
  wrap = <img src="fileadmin/Doris/images/Puuloa_092_klein.jpg" width="94" height="67" border="0" alt="">|
  special = directory
  special.value = 6
  1 = GMENU
  1.NO = 1
  1.NO {       
    10 = IMAGE
    10 {
      file.import.field = media
      file.import = fileadmin/Doris/images/
      file.import.listNum = 0
    }
    XY = 94,67
    backColor = #ec0f0f
    # transparentBackground = 1
    wrap = |<img src="fileadmin/Doris/images/Puuloa_093_klein.jpg" width="94" height="67" border="0" alt="">
    noBlur = 1
  }
  1.RO < .1.NO
  1.RO {
    10.file.import.listNum = 1
  }
  1.CUR < .1.RO 

}

als ext-templ. auf der 2. Seite (die hat bei mir die ID=6) komme ich zu dem gleichen Ergebnis - vielleicht habe ich hier noch nicht richtig verstanden, wann was im Ordner uploads/media/ als array durchlaufen wird und wann ich den normalen Bilderpfad angeben muss 😢

fellfresse ·

also ich versuche mal meine erfahrungen die ich in der diskussion gewonnen habe weiterzuvermitteln.

1)
in einem ordner

# Pfad zu den Menu Grafiken
menpath = uploads/

legst du all die grafiken rein die du in deinem menu benutzen möchtest. (eins für den NO zustand, eins für den RO zustand und vielleicht auch eines für CUR)

2)
dann stellst du den seitenheader auf "erweitert" bei allen seiten die in deinem menu erscheinen sollen. dadurch bekommst du ein neues feld das dateien heisst. in diesem feld musst du nun die grafiken einbinden die für diese seite im menu angezeigt werden sollen. also 2 grafiken wenn du nur einen NO und RO zustand hast. diesen schritt musst du für jede seite deines menus machen!

3)
typoscript schreiben und es sollte klappen.

4)
zu deinen scriptfehlern:
du gibst in deinem script 2mal einen pfad zu den grafiken an:

file.import = fileadmin/Doris/images/
und
# Pfad zu den Menu Grafiken
menpath = uploads/

das ist einmal zu viel.
also entweder:

file.import = fileadmin/Doris/images/
oder
file.import = ($menpath)
und im constantsbereich:
menpath = uploads/

zur sicherheit kannst du auch mal folgendes in dein script einbinden:

# debugMode
page.5 = TEXT
page.5.debugData = 1

am besten an erster stelle, dann bekommst du eine übersicht. in der gibt es ein feld das media heisst. dort mal nachschauen ob deine grafiken auch eingebunden wurden.

und du musst für ein menu nicht zig untertemplates schreiben un dann die id überschreiben. das machst du nur auf der oberseite, damit gibst du den startpunkt deines menus an. typo3 erzeugt dann automatisch das menu aus den unterseiten...

gruß

Unbekannter Benutzer ·

Nur der Vollständigkeit halber...
Entweder man gibt einen Pfad im fileadmin an, wo man seine Bilder abgelegt hat ODER uploads/media/ denn genau dorthin kopiert TYPO die Bilder, wenn sie im Mediafeld abgelegt werden. Eigentlich ist das auch die beste Variante, weil TYPO unter Umständen (Dateiname existiert schonmal) die Datei umbenennt und dann den neuen Namen ins Mediafeld reinschreibt, dann funktioniert es natürlich mit den Originalen in fileadmin so nicht.
Ich würde die Originale auch nicht in uploads/ hochladen, denn der Ordner ist eigentlich für die Arbeitskopien von TYPO gedacht, d.h. dort hat man als "User" nichts zu suchen.

Grüße

Christian

typoclau ·

Danke für Eure schnelle Antwort 😉

Seltsamerweise klappt es bei mir nur mit diesem Pfad:

menpath = fileadmin/Doris/images/
menpath=uploads/

läuft ins leere.

Bei

# debugMode
page.5 = TEXT
page.5.debugData = 1

tritt keine Änderung ein, vielleicht steht dies noch an falscher Stelle?

RO wird noch nicht angezeigt - aber: hurra - ich kann die Bilder sehen... 😃

Gruß,