For those of you with limited HTML/DHTML/CSS knowledge who are interested in using FontGrabber to create rollover links for your own web sites, we've put together this basic instruction on how to do this easily.

Let's try to create the following rollover:

Creating the above rollover effect is easy and there are many ways to do this. The HTML code for our example looks like this:

<a class="Rollover1" href="#"><span></span></a>

In the above example you need to replace the # with the url you would like to link to. The name of the rollover class is Rollover1. You can replace this with any valid name that suits you, however, this should also be renamed in the styles shown below.

In addition to the above HTML you also need to create some CSS styles in your stylesheet or in the styles section of the page:

.Rollover1 { cursor:pointer; display:block;
  background-image:url(FG_SamplesD4b.png);
  width:104px; height:33px }
.Rollover1 span { display:block; width:100%; height:100%;
  background-image:url(FG_SamplesD4a.png) }
.Rollover1:hover span { visibility:hidden }

The above styles specify some important details (highlited in red) that you have to modify when using your own images. Firstly, the 2 background image references. The first one: "FG_SamplesD4b.png" represents the rollover image. The second one: "FG_SamplesD4a.png" represents the normal image. Here are the 2 images:

FG_SamplesD4a.png	FG_SamplesD4b.png

The second important thing to change in the styles above are the width and height. In our example, the width of the image is 104 pixels and the height is 33 pixels. If your image has a size of 80 by 50, you should change the width in the style to 80px and the height to 50px.

One more important thing to mention relates to multiple rollovers. If you want to have 2 or more on your page, each has to have its own name. In other words, replace "Rollover1" with a new name for each rollover you include on the page.

And that's all there is to it! This is a very basic example and there are even options for modifying the rollover, such as adding a border and making it into a button. We leave that to you to play around with.

The above example is by no means the only or the best method of creating a rollover. It is a good one though so you are most welcome to use it in your pages. If you prefer to use rollovers provided by your own design tools or those suggested by other sites, that's great too. The technique remains the same and you won't have any problem using images exported from FontGrabber.