Here's the image I'm using
CSS Sprites
Back to Progrower.coffeecup.com
<ul id="navlist">
<li id="home"><a href="index.html"></a></li>
<li id="prev"><a href="http://www.coffeecup.com"></a></li>
<li id="next"><a href="http://www.coffeecup.com/forums/"></a></li>
</ul>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -49px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -94px 0;}
</style>
Place a html box on your page and paste the code below into the Body HTML.
Step 3
Step 1
Step 2
Make your image
Adjust the links to your liking.
Paste the code below into the Header HTML of the same html box above
Now lets add the image to VSD.
Click on "Edit" the "Add Files". Now click on the Root then "Add files". Now browse to your image on your pc. You'll have to adjust the positioning in the css code above in step 3 if you use a different image size then mine.
Step 4
This one is done with a css style sheet