画像でのリンクのデザイン。

なんか微妙なの > Memo > 画像でのリンクのデザイン。

よくa img{border :none}みたいにやってるとこ多いですけど、あれだとリンクされているのかどうなのかが分かり難いと思うんですよ。

a:link img
{	border:		solid 0.5em rgb(170,200,240)}

a:visited img
{	border:		solid 0.5em rgb(240,170,200)}

Sanple

これは大体のブラウザのデフォルトで、こういうようになってると思いますが、色や太さを変えるだけで印象が変ってきます。

a:hover
{	background-img: none}

a img
{	border: 0.5em solid rgb(190,190,190)}

a:hover img
{	border: 0.5em solid rgb(170,200,240)}

Sanple

訪問と未訪問で色は変えれませんが、マウスカーソルが画像の上にのったらborderの色を変えるようにもできます。

IE6ではバグがあって、a :hover{ /* 適当な宣言 */}と記述しないと色がかわらないみたいです。

a:link img
{
	padding:		0.3em;
	border:		solid 1px rgb(190,190,190)}

a:link img:hover,
a:link img:active,
a:link img:focus{
	background:	rgb(220,240,255);
	padding:		0.3em;
	border:		solid 1px rgb(170,200,240)}

a:visited img{
	padding:		0.3em;
	border:		solid 1px rgb(190,190,190)}

a:visited img:hover,
a:visited img:active,
a:visited img:focus{
	background:	rgb(255,230,240);
	padding:		0.3em;
	border:		solid 1px rgb(240,170,200)}

Sanple

これはこのサイトで使っていたソースですけどね。IE6以下だと使えないですが、これからどんどんとIE7やIE8に移って行くと思うので、IE6以下を使用してる人が減れば使ってみてもいいかもしれませんね。