how to replace the page title in the navigation with an imag

[asasello]

dear all,
I guess it is a very basic question but I cant find it in the forum or web, probably I´m unable to describe what I want to do correctly ops:
I need to create a navigation menu made of images instead of text. Basically the text is in the image…
I have 4 menu points (images)
and per point I have 2 images: 1 for the passive-link and 1 for the roll over and span

can someone please help me, or suggest me what I should look for?

Thank you in advance!

[Dmitry]

Hi, have you tried to do something like this ?

1. change menu template, add unique id to[*], it will look like <li id="page-url"> (or maybe id is there by default, I don't remember)

2. In CSS create unique id and classes for li and a, use your images as background

3. font-size:0 to <a> and <span> (span for the active link), and display: block for a or li, depends on your css

[asasello]

Hi, I will try this in a sec.
but will it change all menu items in the website?
Because I also have normal menu navigation items in the same page

[Dmitry]

I think you can control everything with CSS

just specify id for some links which you would like to change.

[Ruud]

I use either of two methods:

1. Change the template to insert an image of which the filename must be the alias (or id). For active I use alias-active.jpg[/*:m:2ww2et7l]
2. Use the extension with which you can choose images per page and display as a navigation: www.contao.org/extension-list/view/page ... ation.html It can do active or hover alternative if you'd use the trick where you shift the image within its container that has overflow: hidden;. The image must contain the inactive and active above or next to another.[/*:m:2ww2et7l]

[Dmitry]

Yes, should work.

I suggested CSS solution because you can use sprites in CSS for menu

[Ruud]

Yes, should work.

I suggested CSS solution because you can use sprites in CSS for menu

Less flexible as well. It all depends on your needs...

[thyon]

CSS sprites are the best way to do it. You can enlarge the page title and then use the image as background. The best way is to assign a class to a page. You can easily multiple edit all your pages's title and CSS class in one go.

Since the class is added to the BODY as well as to the list items in the Navigation, you can then do anything with CSS.