Teilbilder Verlinkung Menü Joomla 2.5

[DerBogo]

Hallo Leute,

ich hoffe meine Überschrift war teilweise verständlich, und zwar hab ich folgendes Problem.
AKtuell soll die Internetseite auf Joomla umgestellt werden.

Jetzt hätte ich gerne dass ich aus dieser Grafik Klick mich die einzelnen Wörter in Joomla zu Menülniks machen kann. Hab auch schon überlegt das ganze über ne imagemap zu machen und dann als separate php per div einfach einzufügen, gibt es da noch ne "elegantere" Lösung?

 

[bananajoe2k4]

Mach nen Modul mit CustomHTML, füg die Grafik mit fixer höhe und Breite ein und platziere unsichtbare Div's über den gewünschten Positionen (position:absolute;top:xx px; left yy px) und leg die Links auf diese Div-Boxen.

 

[Daaron]

Na dann lieber die Image Map...

Ganz elegant wäre es, wenn du
a) die Schriftart zur Verfügung hast (inklusive Berechtigung, sie weiter zu verbreiten)
b) darauf setzen kannst, dass deine Besucher CSS3 Transformation nutzen können

Dann könntest du @font-face + ne kleine CSS3-Rotation nutzen und hättest deine Links als Text.

 

[DerBogo]

a) Also, Schriftart hab ich + Berechtigung
b) Welche Faktoren müssten denn NICHT gegeben sein um css3 Transformation nutzen zu können?

@ font face ... und hier schmier ich mit meinem Latein schon wieder ab

 

[Daaron]

Also nochmal zur Schriftart. Du musst wirklich peinlich genau darauf achten, dass du die Schrift weiterverbreiten darfst. In dem Moment, wo du @font-face verwendest, laden deine Besucher die Schrift (temporär) herunter, um sie auf deiner Seite zu verwenden.

@font-face ist eine CSS-Deklaration, die ursprünglich von (man wird es nicht glauben) Microsoft stammt. Über diese Deklaration kann man Schriften auf dem Webserver innerhalb der CSS-Deklaration verlinken und mit der "font-family"-Deklaration somit auf mehr als die übliche 6-7 websicheren Schriften zugreifen. Jeder moderne Browser kann mit der Deklaration umgehen, und da sie ursprünglich von MS stammt geht das Ding (mit Einschränkungen) sogar im IE6.
Über die nun verfügbare Schrift stellst du die Worte Faustball sowie deine Navigation dar.

Was die CSS3 Transformations angeht: http://caniuse.com/#feat=transforms2d
Du würdest einfach deine Navigation z.B. als unsortierte Liste anlegen, jeder Nav-Punkt ist ein <li> innerhalb des <ul>. Jedem <li> der Navigation weist du jetzt per CSS3-Transformation eine Rotation um ein paar Grad gegen den Uhrzeigersinn (mit der Mitte als Drehpunkt) zu. Alles am Kopf, das jetzt noch etwas schief steht, packst du zusammen in einen gemeinsamen Container und lässt auch diesen etwas gegen den Uhrzeigersinn rotieren.