Menu from an image

bump

Are these wordpress pages?

Because if so, you can use conditional blocks:

<?php if ( is_page("Dogs") ) : ?>

<img src="img/dogs.jpg" />

<?php elseif ( is_page("Cats") ) : ?>

<img src="img/cats.jpg" />

<?php elseif ( is_page("Turtles") ) : ?>

<img src="img/turtles.jpg" />

<?php endif; ?>

What do you want the image map for? Just an image as a link, or for different parts of the image to act as links to different places?

ah ok thanks for that code there.

And yes, different parts of the image to act as links to different places. Or if there’s a way to just splice the image up and piece them together, that’d work for me as well.

So, I guess I don’t put that image in the css style then? I just put it in the code for the page itself?

Or perhaps check this out: https://www.w-a-s-a-b-i.com/archives/2004/05/26/wordpress-related-entries-plugin/

The text in that top bar is not part of the image. I wouldn’t mind doing it that way if I could somehow bold or change the color of the word if I’m viewing that page.

cowpie: There’s several ways to do what you’re wanting to do here, but I’ll explain the way that wasabi is doing it (from your link).

The first thing he has on that page is a div which holds that top menu bar background. He does this with a div called “headerimg”.
#headerimg { background: url('https://www.w-a-s-a-b-i.com/wp-content/themes/wasabi_green/images/personalheader.jpg') no-repeat top;}

There’s more to it than that, he uses some margins and such to specify it’s location and padding and so on.

To get the text to appear, he has this bit of code right after that div:
<div id="supernavcontainer">
<ul id="supernav">
<li><a href="https://www.w-a-s-a-b-i.com" id="Journal" alt="Read!">Journal</a></li>
...
</ul>
</div>

The main thing to notice here is that it’s an unordered list of links inside the supernavcontainer div. He positions this div on the page using absolute positioning, and puts it right on top of the background image:
#supernavcontainer
{
position: absolute;
top: 0px;
left: 50%;
width: 500px;
height: 10px;
margin: 0 0 0 -25px;
padding: 2px 0 0;
}

Then, he does some more positioning on the unordered list itself, along with specifying fonts and so on:

#supernav
{
margin: 0;
padding: 0;
width: 500px;
left: 0;
text-align: center;
color: #777;
font: bold 12px 'Century Gothic', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Sans-Serif;
letter-spacing: 0.07em;
display: block;
}

To get the list to display in a line and lowercased, he has this bit of CSS:
#supernav li
{
display: inline;
margin: 0;
padding: 0;
text-transform: lowercase;
}

He makes the links white and spaces them a bit using this:
#supernav a
{
color: white;
text-decoration: none;
padding: 0 5px 5px;
}

And finally, he adds the hover effect to each link:
#supernav a:hover
{
border-bottom: solid 4px white;
background: none;
}

That sort of approach is a better way to go than image maps, IMO.

Yea, I’d be fine with that method, now the only question I would then have is, how can I make certain text bold, or another color if I’m viewing that page?

cowpie: You could put some code in the bit that spits out the li’s to give them special characteristics. Something like this:
<div id="supernavcontainer">
<ul id="supernav">
<li <?php if (is_page("cats")) echo 'id="currentpage"'; ?>><a href="link_to_cats_page">Cats</a></li>
<li <?php if (is_page("dogs")) echo 'id="currentpage"'; ?>><a href="link_to_dogs_page">Dogs</a></li>
...
</ul>
</div>

Then you need a new entry in the CSS, like so:
#currentpage a {
color: red;
}

Thus the link to the current page gets shown as red.

Ok, so lets say when I’m on the cats page, I have subpages called “Ferrel, Cheshire, Tabby”, which are shown as links in a similar fashion as the Dogs, Cats, and Turtles.

Therefore, my page now has two menus on it. So whenever I’m on the Tabby page, I still want the Cats title to be bolded/red/whatever. Would I just need to put in a bunch of “Or” situations in that if statement? If so, how do I do that.

Ahh. One row of static links is easy, but when you start wanting multiple rows and children and such, well, now you’re getting into extremely complex territory, and you might find this sort of thing better suited for a plugin.

One plugin that handles this well is WP-PagesNav: https://www.adsworth.info/projects/wp-pagesnav

There’s probably other plugins to do this sort of thing as well.

yea see that’s why I wish I could just use an image map. I feel like with that plugin, I have to hack around with it to get it to work how I want it. I guess there’s no other way?

Hopefully I’m reading your question right, cowpie…

WHat you’re wanting is basically a page with a menu that has three links (for example): Cats, Dogs and Turtles. We’ll say “cats” is the default page you come to. When you’re on the “cats” page, you want a submenu to be opened up under the “Cats” heading, and (again, for purposes of example) you want the background color of “Cats” and the submenu of “cats” to be white, and th etext to be red abd bold – while the other links have a blue background and normal black text.

When someone clicks to “Dogs”. and that page opens, you want “Dogs” to have a submenu with a white background and bold, red text, but “Cats” reverted back to black on blue – just like “turtles”…

Am I reading you right? If so, then yes, this is a simple thing to do via CSS. Here’s an example of how to do it (and you’ll probaby need to edit to customize for yourself, as I’m typing it off the top of my head):

HTML:
<body id="cats">
<ul id="nav">
<li><a href="#">Cats</a>
<ul>
<li><a href="#">sublink1</a></li>
<li><a href="#">sublink2</a></li>
<li><a href="#">sublink3</a></li>
</ul>
</li>

<li><a href="#">Dogs</a>
<ul>
<li><a href="#">sublink1</a></li>
<li><a href="#">sublink2</a></li>
<li><a href="#">sublink3</a></li>
</ul>

<li><a href="#">Turtles</a>
<ul>
<li><a href="#">sublink1</a></li>
<li><a href="#">sublink2</a></li>
<li><a href="#">sublink3</a></li>
</ul>
</li>
</li>
</ul>
</body>

The CSS to follow would be like so:

CSS:
ul#nav li ul {display:none;}
/* this bascially says that, by default, the submenus for all #nav items should not be shown, only the top-level link will be seen */

ul#nav li a, ul#nav li a:link {
background:blue;
color:#000;}
/* this says the default top level links will have a blue background with black text */

body#cats ul#nav li ul {display:block;}
/* This says "if the page ID is "cats" then you're on the "cats" page, and the ul of #nav - which is normally not shown, is to be displayed, exposing the submenu links" */

body#cats ul#nav li a, ul#nav li a:link {
background:#FFF;
color:#C00000;
font-weight:bold;}
/* this says "if the body id is "cats", then you're on the "cats" page, and the links should have a white background with bold, red text" */

Hopefully that was a bit clearer than mud for you. All you need to do, subsequently, is to give each body tag an ID that’s uniquely associated with the page in question, and alter the CSS above to reflect that. Then, when the end user surfs through the pages, they’ll know what page they’re on, and see the submenus associated with *only* that page.

HTH!

Ah fantastic, that’s exactly what im lookin for. Thanks boss