ホームページ作成について質問です。 - HTML - 教えて！goo

ホームページ制作について質問です。
http://siterepair.ddo.jp/ のグローバルナビゲーションのように、ソース上ではテキストだが、ブラウザ上では画像アイコンのボタンにする方法が知りたいです。

私のホームページのグローバルナビゲーションのソースです

※html
<div id=mainImage>
<ul>
<li><a href="A"><img src="../images/gnavi01.png" alt="あいうえお" width="100" height="25" /></a></li>
<li><a href="B">"><img src="../images/gnavi02.png" alt="かきくけこ" width="100"height="25" /></a></li>
<li><a href="C">"><img src="../images/gnavi03.png" alt="さしすせそ"width="100"height="25" /></a></li>
</ul>
</div>

※css
#mainImage{
height: 250px;
width: 900px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/header.png);
background-repeat: no-repeat;
padding-top: 1px;
}
#mainImage ul {
margin-left: 362px;
margin-top: 233px;
}
#mainImage li {
float: left;
}


試しに、
<a herf="A" class="home">として、

.home {
display: none
background-image: url(../images/gnavi01.png);
}
のように設定したら、gnavi01.pngも一緒に消えてしまいmainImageの背景に設定した画像が表示されているだけになってしまいます。


http://siterepair.ddo.jp/ のグローバルナビゲーションのように、
<ul id="globalmenu" class="clearfix">
<li><a class="home" href="./">SEO無料</a></li>
<li><a class="seoexamine" href="seoexamine/">SEO診断ツール</a></li>
<li><a class="seotools" href="seotools/">SEO対策サービス</a></li>
<li><a class="seoplan" href="fixedseo/">SEOプラン</a></li>
<li><a class="seminar" href="seminar/">SEO対策セミナー</a></li>
<li><a class="faq" href="faq/">よくある質問</a></li>
<li><a class="inquiry" href="inquiry/">お問い合わせ</a></li>
</ul>
alt属性による説明文ではなく、テキストでの入力をしたいのですが、無知なもので色々調べましたが出来ません。
ご教授頂けるよう宜しくお願いします。（dreamweaver cs4を使って作成しています）

.