Zum Inhalt springen

IMGMENU & RO ?

Erstellt am 11. Mai 2007 · 14 Antworten · letzte Antwort am 14. Juni 2007

Tags: Frage

Corelgott ·

Hi @ all,

ich habe ein problem mit einem imgmenu...

Eigentlich recht simpel die frage: Kann ein imgmenu RO elemente? und wenn ja hat mal wer nen link für mich, mit nem tut bzw. kann mir jemand sagen wie und vor allem ob das überhaupt geht?

Ich lege mal etwas TS bei, damit meine struktur deutlicher wird...

temp.topmenu = HMENU
temp.topmenu.special = directory
temp.topmenu.special.value = {$mnuStart}

temp.topmenu.1 = IMGMENU
temp.topmenu.1 {
  main.XY = [10.w] , [10.h]
  main.format=jpg
  main.quality=88
 
  main.10 = IMAGE
  main.10.format = jpg
  main.10.quality = 88
  main.10.file = fileadmin/back.jpg

  dWorkArea = -30,200
  NO.distrib = 0, 46
  NO.10 = TEXT
  NO.10 {
	text.field = title
      	fontSize = 12
      	fontColor = #666666
      			
      	fontFile = fileadmin/font.ttf
	antiAlias = 1
	angle = 48
	align = right
	offset = 0,0
	imgMap.explode = 3,2

      	shadow.offset = 2,2
	shadow.blur = 10
	shadow.opacity = 0
  }
}

Vielen Dank im Voraus!

cya Corelgott

just2b ·

Hallo und willkommen im Forum,

nimm doch ein normales GMENU, das kanns auf jedem fall

georg

Corelgott ·

Hi Danke für deine Antwort!

Das Problem ist, dass jeder menü-punkt unterschiedlich ist. d.h. ich will meine punkte auf einen sich nicht wiederholdenden bild von oben bis unten verteilen. (Als beispiel eine Landschaft und auf der sollen die menu-einträge liegen)

Ich wüsste nicht, bzw. habe nichts gefunden, wie man per TS einen GMenu-item einen bildausschnitt als background geben kann...

Ich glaube somit muss ich leider das IMGMENU benutzen **wenn ich das richtig sehe**

Die Menü-Punkte per transparentem Gif drüberlegen geht auch schlecht, da gif aufgrund seiner transparentz einfach nur dämlich aussieht und dann der schatten flöten ginge... PNG würde ich ungerne wegen des IE6 nehmen...

Ergo bleibt nur ein individuelles Menu-Item pro Eintrag. Da das Ganze dynamisch seinen soll... möchte ich nicht die "ich gebe TS eine liste von bildern"-Variante geben... **vor allem die pixelgenau erst mal mit Gimp, Photoshop oder Corel zu machen eh immer so ein krampf ist... gerade wenn man ein css-float-layout gemacht hat ^^

aber lange rede kurzer sinn... Kann man mit einem normalern GMenu auch Bildteile einer quelle extrahieren und diese als Background für Einträge benutzen? Dann bin ich sofort dabei! (Ein snipplett wäre aber dennoch sehr nett ^^)

thx

Corelgott

ps.: Aller besten Dank für den netten Willkommensgruss! ^^

Corelgott ·

Hi Just2B,

einfach den RO definieren habe ich schon verscuht. Leider ohne Erfolg... Also einfach RO anstellen und dann .NO "kopiren" hat ebensowie etwas gebracht, wie RO komplett definieren. (Und ja ich habe RO = 1 vorher gemacht um RO zu aktivieren ^^)

Aber thx für den Tip!

Hat vll noch jemand eine idee?
Oder kann jemand bestätigen, das RO bei einem IMGMENU eigentlich funktionieren sollte und ich bloß etwas falsch mache?

cya

Corelgott

ps.: Ich hänge nochmal das TS an...

temp.topmenu.1 {
  main.XY = [10.w] , [10.h]
  main.format=jpg
  main.quality=88
 
  main.10 = IMAGE
  main.10.format = jpg
  main.10.quality = 88
  main.10.file = fileadmin/back.jpg

  dWorkArea = -30,200
  NO.distrib = 0, 46
  NO.10 = TEXT
  NO.10 {
	text.field = title
      	fontSize = 12
      	fontColor = #666666
      			
      	fontFile = fileadmin/georgia.ttf
	antiAlias = 1
	angle = 48
	align = right
	offset = 0,0
	imgMap.explode = 3,2

      	shadow.offset = 2,2
	shadow.blur = 10
	shadow.opacity = 0
  }
  RO=1
  RO.10 = TEXT
  RO.10 {
	text.field = title
      	fontSize = 12
      	fontColor = #ffffff
      			
      	fontFile = fileadmin/georgia.ttf
	antiAlias = 1
	angle = 48
	align = right
	offset = 0,0
	imgMap.explode = 3,2

      	shadow.offset = 2,2
	shadow.blur = 10
	shadow.opacity = 0
  }
}


page.10.marks.menu < temp.topmenu
Corelgott ·

hmm hat keiner mehr eine idee zu dieser Thematik? Ich muss gestehen, dass das einzige workaround welches ich mir vorstellen kann, nur sehr statisch wäre....

Unbekannter Benutzer ·

ein Vorschlag als Workaround...

Du machst ein GMENU bei dem die Buttons transparent sind und legst hinter das gesamte Menü (also das umgebende DIV oder was auch immer) per CSS ein background-image.

Grüße

Christian

Corelgott ·

hi kitsunet...

wie ich oben schon geschrieben habe...

[zitat]
Die Menü-Punkte per transparentem Gif drüberlegen geht auch schlecht, da gif aufgrund seiner transparentz einfach nur dämlich aussieht und dann der schatten flöten ginge... PNG würde ich ungerne wegen des IE6 nehmen...
[/zitat]

somit... was für ne transparentz schlägst du vor?

Phlogiston ·

Hallo zusammen

Ich habe ähnliche Probleme wie Corelgott. Hat hier irgendjemand noch einen Hinweis? Oder ist hier typo3 einfach fehlerhaft?

fuss ·

Olla!

Wieso so kompliziert? Hoffe, ich haue jetzt nicht zu sehr auf die Kacke 😉

Definiere Dir einfach Deine beiden Bilder in NO:

NO.10 {
 bla
}
NO.20 {
 bla
}

Dem ersten Bild gibst Du mit "params" eine CSS Klasse class="imagenormal" und dem anderen class="imagehover" mit. Dann im CSS:

/* normal state */
#deinmenu a img.imagenormal {
 display: block;
}
#deinmenu a img.imagenormal {
 display: none;
}

/* hover state */
#deinmenu a:hover img.imagenormal {
 display: none;
}
#deinmenu a:hover img.imagenormal {
 display: block;
}

Somit wird bei einem hover zwischen beiden Bildern einfach getauscht.

gruss, fuss

Phlogiston ·

Die Idee scheint eigentlich ganz nett zu sein. Nur hilft es mir im Konkreten Fall nicht weiter. Denn wegen dem rotierten Menu, kann ich nicht mal eine Grafik vernünfig einbinden.

Dennoch bleibts ein Rätsel warum RO beim IMGMENU nicht klappt.

fuss ·

Hm dann entweder das Bild aufteilen, oder aber mal versuchen, die Menüpunkte durchzunummerieren, und Dir mit Hilfe des crop Befehls anhand der Nummer den jeweiligen Ausschnitt des Bildes holen.

Oder aber, hm...

folgendes Konstrukt (ohne Bildzerstückelei):

Dein Menü ist in einem div, das div hat als Background das Normale Bild. In dem div sind Deine Menüpunkte (vom GIFBUILDER als transparent gif gerendered, also nur der TEXT), jeder Menüpunkt hat eine eigene CSS class und eine feste Höhe. In der CSS class definierst Du dir Dein hover Bild als background image, und die Background Position (In diesem Fall sind Deine Links 20px hoch):

#deinmenu a.link01:hover {
 background: transparent url('imagehover.jpg') no-repeat 0 0;
}
#deinmenu a.link02:hover {
 background: transparent url('imagehover.jpg') no-repeat 0 20px;
}
#deinmenu a.link03:hover {
 background: transparent url('imagehover.jpg') no-repeat 0 40px;
}

Du hast somit exakt 2 Bilder, welche von dem gif Text überlagert werden, und der jeweilige Bildausschnitt beim hover wird durch die BG position festgelegt.

gruss, fuss

Phlogiston ·

danke vielmals für deine unterstützung. Der hacken an der Sache ist halt, dass das Menu dann nicht mehr vollständig automatisch dynamisch erstellt wird...

Ich haber nun das menu einfach ein wenig anders designt, aber vielleicht finde ich noch energie mich nochmals darum zu kümmern.

fuss ·

Der hacken an der Sache ist halt, dass das Menu dann nicht mehr vollständig automatisch dynamisch erstellt wird...

Huh? Wieso dass denn nicht?
Du hast doch sowieso zwei Bilder, oder hab ich das falsch verstanden?
Die Menüeinträge werden doch dynamisch erstellt, und die beiden Bilder kannst Du Dir mit aus dem media field holen.

gruss, fuss