Images in navigation

If you want to use images, these links will have to be hard-coded into one of your template files. Check out this article on editing your header to get started on editing your template files.

You could use JavaScript to add rollover images, but that’s a big headache, I’d suggest using CSS sprites.

i checked out both links and im not sure they are exactly what im after, but i might not be explaining myself very well.

the site im building will have 5 page links on a horizontal navigation, i want to have 5 small (1cm x 2cm approx) images, side by side and each one being a link to a different page.

thanks for the quick reply by the way ??

The Designing Headers article will show you how to add clickable images to your header that would be the first step towards figuring out how to create buttons.

Check out Making the Whole Header Clickable, and then just scale that down to a smaller button and multiply it by 5. But that is just to make an image in your HTML into a link

CSS sprites are an easy way to create images with rollovers. With this method, you are using regular text links, hiding text the text, and adding a background image to make it into a button. With the sprites method you can make it shift the background to make it look like it switches images.

There is a whole screencast on how to do CSS sprites if you’d prefer to watch a video. There are some good videos on wordpress.tv on editing themes.

But it will be less trouble for you if you get this working in straight HTML and CSS, and then add it to your theme, rather than letting WordPress get in the way and confuse you.

ok, ill look at it in more detail. its just, i can make a click-able header im just not sure how to split my header into 6 images lol
is this something anyone has actually done with wordpress before, if seen images behind the text as one image that gets cut down by the next link button. but nothing like this.
iv even looked for themes ready don lol

That’s just an example, you don’t want to make your whole header clickable and then slice it up, just use the same technique on a smaller scale.

Maybe a better example would be a theme that is already including small image links in their navigation using CSS. Check out the demo of the Arras Theme which uses CSS image replacement in the navbar for the RSS and Twitter links. You could download that theme and see how they are doing it.

If you’d prefer to add the buttons with HTML rather than CSS, take a look at the logo link in the Motion theme.