Hi LauraS
SilverStripe uses its own template Engine. It's really powerful and you can fully customize the look of your site with only little or no PHP knowledge.
You should probably have a look at the SilverStripe Tutorials or the documentation about templates.
Creating image rollovers is not a problem really but you should remember, that search engines or screen readers can't read text in images. So it's always a good idea to have a text somewhere as well.
Usually i solve these kinds of problems somehow like this:
<!-- html code for navigation -->
<ul id="Navigation">
<li><a href="Link1" id="Item1"><span>Textual description 1</span></a></li>
<li><a href="Link2" id="Item2"><span>Textual description 2</span></a></li>
...
</ul>
/* CSS for navigation, in this case 200px wide, each item 30px high */
#Navigation { width:200px; }
#Navigation a { display:block; width:100%; height:30px; }
#Navigation a span { display:none; }
a#Item1 { background:url('link-to-image') no-repeat left top; }
a#Item1:hover { background-position:left center; }
a#Item1.current { background-position:left bottom; }
... etc.
As you can see, we prevent the text from showing by setting it's display property to 'none'. Rollover effects can easily be created by using a background image. If your navigation entry is 30 pixels high, you can create a image that is 60 or 90 pixels high and have all your navigation states in just one image (this reduces server requests and is convenient for designers). Something like this:
+-------- image --------+
| Normal state |
+-----------------------+
| Rollover state |
+-----------------------+
| Active state |
+-----------------------+
The stylesheet (above) simply moves the background image around for the different rollovers.
To get a unique ID for each navigation item, i suggest you use the $URLSegment (which is unique and should not change...).