CSSオン、画像表示オフ環境でも使える画像置換

トップページへ

解説
CSSで、text-indent: -9999;とかの指定だとCSSオン、画像表示オフ環境では何も表示されません。
この方法ではそれが回避できるものの、空のspan要素を使っているため、構文的には適切ではありません。
どちらを取るか悩ましいところですが、すべての環境で情報を漏らすこと無く伝えるという観点から、最近(2008年後半)からはこの方法でコーディングしています。
HTML
<p class="button"><a href="../index.htm" title="トップページへ">トップページへ<span></span></a></p>
CSS
p.button {
	margin-top: 3em;
	margin-bottom: 3em;
	font-size: 1.2em;
	text-align: left;
	line-height: 1.5;
	}
	p.button a {
	display: block;
	position: relative;
	top: 0px;
	left: 0px;
	width: 160px;
	height: 40px;
	overflow: hidden;
	background-color: #fff;
	color: #000;
	}
	p.button a span {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url("toppage.gif");
	width: 160px;
	height: 40px;
	}
	p.button a:hover span {
	background-image: url("toppage_on.gif");
	}

ページトップに戻る