HOME

リンク箇所に画像を使う

マークアップ

<p><a href="linkpage.html">リンク先へ</a></p>

リンク先への案内を画像にする

CSS

※『リンク先へ』の文字が見えなくなるはずだが、表示が消えない。
下の例と同じCSSなのに、なぜだろう。

※�@に、text-indent:-9999px;とすると、動作が安定しない。多くは表示されるので、止む無くdisplay:none;を使う。

<p id="linkbtn"><a href="linkpage.html"><span>リンク先へ</span></a></p>

#linkbtn a span {
	display: none;	・・・�@
	}
#linkbtn a:link, #linkbtn a:visited {
	display: block;
	width: 120px;
	height:22px;
	background : url(btn_lnklav.gif) no-repeat;
	}

ロールオーバー効果を使う

<p id="linkbtn"><a href="linkpage.html"><span>リンク先へ</span></a></p>

#linkbtn a span {
	display: none;
	}
#linkbtn a:link, #linkbtn a:visited {
	display: block;
	width: 120px;
	height:22px;
	background : url(btn_lnklav.gif) no-repeat;
	}
#linkbtn a:link:hover, #linkbtn a:visited:hover {
	display: block;
	width: 120px;
	height:22px;
	background : url(btn_lnklav_over.gif) no-repeat;
	}

配置箇所を変える

<p id="linkbtn"><a href="linkpage.html"><span>リンク先へ</span></a></p>

要素に対する設定をルールに追加する。

#linkbtn {
	float: right;
	margin-right: 20px;
	}

▲このページのトップへ