Help me Navigate my Blog

June 30, 2008 11:01 AM

Wordpress Filter: Can I use a click-map on my header graphic for navigation instead of the text-only navbar that Wordpress makes you use? I have a new blog I'm starting and I would like to make my navigation links for each "PAGE" show up on my header graphic. However, I want to make them graphical to fit the theme of the header page. Is there a way to hide the text from the native navbar and make clickable links that are on my header file?

I haven't found an example of what I want, but you can see my blog at www.christianodellphotography.com/_blog/ and see what I'm talking about. Right below the pictures on my header, I would like to have a series of small graphics (on the header, not below it) that I can have click-maps on just like an html click-map. Is it possible? Anyone?

posted by damiano99 to computers & internet (5 comments total)

You mean something like Veerle's navigation tutorial? Her navigation is also a part of the header.
posted by theiconoclast31 at 11:22 AM on June 30, 2008

I'm struggling to think of a reason this would be prohibited. Links within WordPress are just GET requests, right? If you edit your template to include this, there should be no problem.

theiconoclast31: Those nav links are part of the header, but they are not imagemaps.
posted by mkb at 11:26 AM on June 30, 2008

Although it's not my favorite menu style in the world mostly due to Mystery Meat Navigation, it should be doable.

I've done something similar before where I replaced the dynamically created navigation menu with one that I created myself using this sort of thing (mine was distinctly separate and different graphics for each link).

If you can't have it in the header graphic as you wish, I know for a fact that you can have it where your menu is now and push the menu up far enough with negative padding/margins so that it appears to be part of the header graphic.
posted by theichibun at 11:27 AM on June 30, 2008

I'm not sure what's the difference between having them inside the header graphic and making the menu look like it's inside the header. The latter is easily achievable through the link theiconoclast31 gave you.

For the first, if the page links will be always be the same, it should be a problem at all to make a CSS image-map (like this) and hard-code the links.
posted by Memo at 11:49 AM on June 30, 2008

This should just be a matter of replacing the current content of your #header div with the imagemap/tableaux-o-links content you're wanting, as defined in the standard header.php include.

It looks like you're currently just serving up an empty #header div with the header.jpg image styled into the background in your css file—there are a few ways you could go from there, including (exercise left to a reader, I don't do this sort of thing myself often) just defining an imagemap to include in #header.
posted by cortex at 11:50 AM on June 30, 2008