Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #165

Can I use images instead of text on the main links of a PopMenu Magic menu?

The Answer

Prepared Jun. 2005 by Gerry Jacobsen, PVII

The PMM system is designed to work with text-based links, however, if you really want to use images you can.

A) The recommended approach is to use background images on the text links. See our Using images for top-level links in PMM tutorial for complete step-by-step details on using this approach.

B) Alternatively, if you wish to use actual embedded images instead of the link text you can.

Here's how:

Create a normal text-based PMM menu on your page, then:

1. Select the top-level menu item (preferably in Code View to eliminate the possibility of Dreamweaver corrupting things) and insert an image inside the <a> tags to replace your link text.

for example, this text based link:

<lid><a href="#" class="p7PMtrg">Products</a>

would look like this, the "products" text has been replaced with the <img> code:

<li><a href="#" class="p7PMtrg"><img src="products.gif" alt="Products" width="120" height="24" border="0"></a>

 

The PMM Tweaks directory also lists a few other methods.

2. Also note that you will need to edit your style sheet to move the hover and on states to the second level ULs. You would add a "ul" to each of the link style rules so that they do not target the root level links.

The "#p7PMnav a:hover" rule would become "#p7PMnav ul a:hover"

for example, these rules:

#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
  background-color: #99A189;
  color: #FFFFFF;
  letter-spacing: .01px;
  }
/* the active trigger link style */
  #p7PMnav .p7PMon {
  background-color: #99A189;
  color: #FFFFFF;
  }

Would be changed to this:

#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {
  background-color: #99A189;
  color: #FFFFFF;
  letter-spacing: .01px;
  }
 /* the active trigger link style */
  #p7PMnav ul .p7PMon {
  background-color: #99A189;
  color: #FFFFFF;
  }

That's it!

One additional note: If you are going to apply swap image, or other, behaviors to the image, be sure to have a look at our infoBase article#160 which explains how to get the PMM system to adjust for these additional behaviors.

Back to the questions list