The NAVT plug supports three anchor types in addition to the standard everyday text anchor people typically use. The additional anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors. The anchor styles supported are:

• Standard text link (no graphics)
• Text over Graphics
• Text with a side graphic
• Graphic only (no text)

Anatomy of a Graphic Anchor

A graphic anchor is generally a button or graphic of some type with text (HTML font) on top of it. This anchor typically uses a background image. Some of the time the same graphic image is used to create each link. This makes it necessary to provide a unique set of css classes making it possible to distinguish one anchor from another. NAVT provides several unique class names from which you can create distinct rules for each anchor.

CSS Styling

CSS styling is the cornerstone of creating graphic anchors. NAVT provides anchors wrapped in a DIV tag or anchors outside of a DIV tag. Using a DIV tag enables you to set the width and height of the DIV and then backgrounding it with the desired graphic.

Additional Information

I’ve written additional articles on each of the graphic link types.

• Text with Side Graphic
• Text over Graphic
• Graphic Only Anchors

In the article NAVT and Graphic Anchors, I explained how NAVT plug supported three anchor types that can be used on your web site. The new graphic anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors.
In this article I’ll explain how NAVT creates the Graphic only anchors and what you need to know about the required CSS.

Anatomy of a Graphic Anchor

Along with plain text links, graphic links are probably the most common anchors created for use on web sites. Graphics offer the most options for personalization and remain popular with web site designers. NAVT constructs these links by wrapping a surrogate image inside an anchor. The space reserved can be backgrounded with any image. The anchor text is wrapped within a span that allows the text to be moved off screen while still retaining the HTML text information in the anchor for curious robots crawling your web site.

The graphic below illustrates how to configure an item to create a graphics only navigation item:

The following is the exprected HTML output containing a Graphic Anchor created by the NAVT plugin for a category that has the title World News.

<ul class='menu example'>
<li class='erow topics_item page_item world-news-cat categorytab'>
<div class='navt_gl'><a href='http://example.com/world-news' title='World News' class='navt_glink'>
<img src='http://example.com/wp-content/plugins/navt/images/blank.gif' alt='' class='world-news-img worldgraphic'/>
<span style='margin-left:-5000px;'>World News</span></a>
</div>
</li>
</ul>

Styling a Graphics Only Anchor

NAVT assigns several classes for styling this type of anchor. The following is an example of how to style a NAVT graphic anchor.

ul li.world-news-cat div.navt_gl img.world-news-img,
ul li.world-news-cat div.navt_gl  {
/* set the background image, width and height of the graphic */
width: 100px;
height: 100px;
background: url(images/world.jpg) no-repeat left top;
}

The CSS rules target both the IMG tag and and the image DIV wrapper. The anchor text is automatically moved off the page so it is not visible to site viewers and remains SEO friendly.

Other Types

Each type of navigation item pages, categories, URI anchors, etc) is constructed the same way and each is provided with a unique set of classes similar to the example shown above. Below is a list of the classes created for each type of item. When in doubt, look at the source code created by NAVT by using your Browser.

In the article NAVT and Graphic Anchors, I explained how the NAVT plugin supported three anchor types that can be used on your web site. The new graphic anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors.

In this article I’ll explain how NAVT creates the Text with Side Graphic anchors and what you need to know about the required CSS.

Anatomy of a Text Anchor with a Side Graphic

Perhaps you’ve seen them. This is a anchor that has a graphic positioned somewhere near it. The graphic can be above, to the right or left or below the anchor text. Often they are used to show a small teaser of a much larger graphic. The construction of these anchors separates the graphic from the anchor. By making the position of the anchor absolute, the anchor can generally be placed anywhere around the graphic.

The graphic used to provide the background image is obtained from a class that you provide from your stylesheet. You supply the name of the class at the time the link type is configured.
The graphic below shows the configuration of a category using text with side graphic. The Anchor type is set to Text with side graphic and the user CSS class worldgraphic has been entered into the text box.

The NAVT output for the navigation group would appear as:

<ul class='menu example'>
<li class='erow example_item page_item world-news-cat categorytab'>
<div class='navt_twsg worldgraphic'>&nbsp;</div>
<a href='http://example.com/world-news' title='World News'>World News</a>
</li>
</ul>

Notice that the DIV is assigned the user defined class worldgraphic and contains only a non-breaking space as a place holder. The anchor appears outside of the DIV so it can be moved using absolute positioning relative to the LI parent container.

Here is a CSS example that would place the anchor to the right of the graphic:

li.world-news-cat { /* parent container must be relative */
position:relative;
}

ul li.world-news-cat div.worldgraphic { /* set size of background and image */
background: transparent url(images/world.jpg) no-repeat left top;
width: 100px;
height: 100px;
}

ul li.world-news-cat a { /* set for absolute positioning */
position: absolute;
top: 50%;
right: 0;
z-index: 50;
}

Other Types

Each type of navigation item: pages, categories, URI anchors, etc) is constructed the same way and each is provided with a unique set of classes similar to the example shown above.

In the article NAVT and Graphic Anchors, I explained how NAVT plug supported three anchor types that can be used on your web site. The graphic anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors. In this article I’ll explain how NAVT creates a Graphic anchor and what you need to know about the required CSS.

Anatomy of a Graphic Anchor

Along with plain text links, graphic links are probably the most common anchors created for use on web sites. Graphics offer the most options for personalization and remain popular with web site designers. NAVT constructs these links by adding a user defined class to a DIV that wraps the anchor.

Below is an example of a Text Over Graphic anchor created by the NAVT plugin for a category that has the title World News.

The image above shows how the World News category is configured in NAVT. The text over graphic anchor type is selected and the user CSS class worldgraphic has been entered into the CSS class for graphic text box.

The NAVT output for this category configuration would appear as:

<ul class='menu example'>
<li class='erow example_item page_item world-news-cat categorytab'>
<div class='navt_tog worldgraphic'>
<a href='http://example.com/world-news' title='World News' class='navt_clink'>World News</a>
</div>
</li>
</ul>

To make the graphic appear behind the text World News you would create a CSS rule in your style sheet that adds a background to the DIV that contains the World News anchor. The DIV also contains the width and height of the graphic:

ul.example li.world-news div.worldgraphic {
background: transparent url(images/world-news-graphic.jpg) no-repeat left top;
width: 100px;
height: 20px;
}

Other Types

Each type of navigation item: pages, categories, URI anchors, etc) is constructed the same way and each is provided with a unique set of classes similar to the example shown above.