Atalaya Studio

Introduction

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.