CSS のお勉強:所謂、画像置換てやつ

所謂テキストリンクの a 要素をプロック化し、text-indent : -9999px ; でテキストを遥か彼方にぶっ飛ばし、背景画像だけを表示したうえに、疑似クラスを使って、背景画像を入れ替えるという、よく知られたうざい技。一応書いとく。

使用している画像

link-b-link.png a:link link-b-visited.png a:visited link-b-hover.png a:hover link-b-active.png a:active


text-indent : -9999px ; で背景画像のみを表示する

上記のような、なんの変哲もないテキストリンクを画像で置換するやつね。


ソース
<ul class="alt">
<li><a href="textover2.html" title="クリックしる">クリックしる</a></li>
<li><a href="urn:nai" title="未訪問">未訪問</a></li>
</ul>
スタイルシート
ul.alt {
	margin : 0 ;
	padding : 0 ;
	list-style-type : none ;
}

ul.alt li {
	margin : 0 20px 20px 0  ;
	padding : 0 ;
	list-style-type : none ;
	float : left ;
}

ul.alt li a {
	display : block ;
	width : 80px ;
	height : 80px ;
	margin : 0 ;
	padding : 0 ;
	text-indent : -9999px ;
	background-repeat : no-repeat ;
	background-position : top center ;
	text-decoration : none ;
	overflow : hidden ;
}

ul.alt li a:link {
	color : blue ;
	background-image : url(link-b-link.png) ;
}

ul.alt li a:visited {
	color : purple ;
	background-image : url(link-b-visited.png) ;
}

ul.alt li a:hover {
	color : red ;
	background-image : url(link-b-hover.png) ;
	background-color : transparent ;
}

ul.alt li a:active {
	color : green ;
	background-image : url(link-b-active.png) ;
}

この記事を書いた人