リンク前とリンク済みで画像を変える

■動作ブラウザ　【 IE:4.0　 NN:6.0】　■CSSバージョン【1】
Internet Explorer Netscape Navigator iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.x 6.0 7.0 2.x 1.0 1.1
Windows × ○ - ○ ○ ○ × × × ○ ○ - - -
Macintosh × × × × - - × × × ○ ○ × ○ ○
UNIX - - - - - - × × × ○ ○ - - -

ポイント a.link { background:url(normal.gif) no-repeat 0 0%; font-size:12px; }
a.link:visited{ background:url(visited.gif) no-repeat 0 0%; font-size:12px; }
説　　明 リンク前とリンク後で画像を変えるにはaタグの背景画像を疑似プロパティを利用して指定します。
サンプル <html>
<head>
<title>リンク前とリンク済みで画像を変える</title>
<style type="text/css"><!--
a { text-decoration:none; }
a.link { background:url(normal.gif) no-repeat 0 0%; font-size:12px; }
a.link:visited{ background:url(visited.gif) no-repeat 0 0%; font-size:12px; }
--></style>
</head>
<body>
<a href="http://www.openspc2.org/RSS/" class="link"><img src="trans.gif" width="10" height="10" border="0">RSS</a><br>
<a href="http://www.openspc2.org/b" class="link"><img src="trans.gif" width="10" height="10" border="0">TOP</a><br>
</div>
</body>
</html>
補足説明 ブラウザによって画像の表示位置が変わる事があるので注意が必要です。Safariでは余白などはできずに正しく表示されます。Firefox 1.0、Internet Explorer 6、Netscape 7では左側と上側に１ピクセルの余白ができます。

■サンプルを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!