(HTML)リンクに画像を使う時に枠がつかないようにする

よくHTMLのリンクにイメージを使ってるのをみます。

基本は img タグを a タグで囲うだけなのですが、普通に囲むと下記のように枠線ができてしまいます。(OperaやChromeなどは枠が出ませんでしたが。。)

HTML:

 href=""> src="./linktest.jpg" >

で、この枠がつかないようにするにはどうすればいいんだろうと思って、aタグのborderとかかなと思ってましたが、結局 img タグのborderで設定できることが分かりました。

(まあ慣れてる人には当然なんでしょうけど、aタグで囲むと明示的に指定しない限りはimgのborderが有効になるといのはなんか解せないですね。)

スタイルシートで img タグのborderを無効にすればOKです。

HTML:

 href=""> style="border:0px" src="./linktest.jpg" >

ちなみに、JavaScript無しでマウスオーバーしたら画像を変えたいとかいうときは img タグを使うよりも a タグの背景に定義したらできるみたいですね。

こんな感じです。

HTML:

 href="" class="linktest" >

CSS:

a.linktest {
   display:block;
   width:198px;
   height:50px;
   background-image:url('./linktest.jpg');
}
a.linktest:hover{
   background-image:url('./linktest_hover.jpg');
}

注意点は幅と高さをイメージと同じにすることです。そうしないと、繰り返して表示されてしまいます。(ちなみに、幅、高さを指定しないと表示すらされません)

あと、aタグの background-image で画像をしているため当然と言えば当然ですが、枠線はでません。

Web屋でないとちょっとしたことするのに大変っすね。