Suche Navigations-Modul mit Bildern

[shadows]

Hallo zusammen,
ich bin auf der Suche nach einer Navigation, die mit Bildern statt mit Texten arbeitet. Habe das Forum schon durchsucht, leider nichts passendes gefunden.
Kann mir jemand einen Tipp geben?

shadows

[McHubi]

Hi,

mal auf die Schnelle...

Zur - beim Beispielmandanten mitgelieferten (z.B. 4.8.12) - Hauptnavigation findest Du im entsprechenden Modul-Template: "{name}". Hierüber wird der Kategoriename ausgegeben. Wenn Du jetzt statt

Code: Alles auswählen

<a href="{url}" title="{name}" class="navmainStandardLevel_{css_level}{css_first_item}{css_last_item}{css_active_item}">{name}</a>

folgendes schreibst

Code: Alles auswählen

<a href="{url}" title="{name}" class="navmainStandardLevel_{css_level}{css_first_item}{css_last_item}{css_active_item}"><img src="PFAD_XYZ/{name}.jpg"></a>

solltest Du recht einfach immer das passende Bild anzeigen lassen können. Voraussetzung ist nur, dass der Dateiname mit dem Kategorienamen übereinstimmt. Allerdings wird dann der title des Links ggf. etwas komisch aussehen. Bei einem Bild "anfahrt_und_routenplaner.jpg" müsste der Kategoriename"anfahrt_und_routenplaner" lauten. Genau das bekommt der Nutzer aber dann auch als Tooltip. Insofern je nach Fall einfach title="{name}" rauswerfen (was aber unsauber wäre und z. B. in punkto SEO Nachteile mit sich brächte) oder soweit was hinfrickeln, dass hierfür nicht der Kategoriename sonder der Alias der Kategorie genutzt würde...

Wenn Du statt der statischen Bilder allerdings beim Hovern und Aktivieren einen Bildwechsel haben willst, wird's komplizierter. Folgendes ließe sich aber recht simpel lösen: Beim Hovern/ Aktivieren soll das Bild heller oder dunkler erscheinen als die übrigen.

Hierzu packst Du einfach das per {name} anzuzeigende Bild nicht wie oben in den Vordergrund sondern z. B. in den Hintergrund eines DIVs. Die Klasse des Links (diese Geschichte hier: {css_level}{css_first_item}{css_last_item}{css_active_item}) sorgt dann dafür, dass über dem Hintergrund ein fast transparentes, abdunkelndes oder aufhellendes png liegt. Sobald gehovert oder aktiviert wird, fällt dieses png einfach weg.

Viel Spass...