Suche Navigations-Modul mit Bildern

Gesperrt
shadows
Beiträge: 24
Registriert: Mo 8. Mai 2006, 12:54
Wohnort: Hannover
Kontaktdaten:

Suche Navigations-Modul mit Bildern

Beitrag von 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
Beiträge: 1223
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Suche Navigations-Modul mit Bildern

Beitrag von 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...
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)
Gesperrt