Faking a Graphical Link

By: Chris Beasley, Published: 2003-05-05, Parent Categories: Search Engine Optimization, CSS

Having text links is extremely important for your internal site navigation since internal links do count for link popularity purposes and the context of your incoming links is very important. Graphical links simply do not provide the same amount of context as a text link does. So basically you can choose to have a graphical menu and get almost no context benefit from it, or you can have a text based menu with your keywords in the links and get a significant context benefit from it.

But what if you could have your cake and eat it too? There is a way. You can fake graphical links.

Now before I get into the meat of this article let me say that you don't always need to have text links in your menu. Changing a graphical link to your "Contact" page to a text link isn't going to give you any real benefit. However, using this site as an example, by using "Search Engine Optimization" as the text we use to link to our SEO category on the menu to the left we are giving that category page a substantial benefit.

So if you're not going to use keywords in your menu you might as well not worry about if it is text based or not.

Now lets talk about faking graphical links. There are two main ways you can get the appearance of a graphical menu while keeping keyword rich text. I will describe each below.

Method 1: Giving Links a Background

We'll start with the best method first so you can skip the remaining pages of this article. Using CSS you can specify a background image for just about anything, including a text link. You can also change this background image using the hover pseudo-class. The end result is a javascript-less image rollover on a text link. Simple huh? Well yes, but not quite that simple. There are a few quirks you should be aware of.

First of all, like any other image rollover, you'll want to preload your images using the javascript below: 

<script language="javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i
.
.
.
<body onLoad="MM_preloadImages('up.jpg','down.jpg')">

Method 1 Continued»