- ベストアンサー
CSS画像の一部分をリンクにする方法とは？
- CSSを使って画像の一部分をリンクにする方法を解説します。
- マウスオーバーした時に指定した部分だけ画像が変わり、リンクになるようにしたい場合の実装方法を紹介します。
- 例示されたHTMLとCSSのコードを使用して、画像の一部分をリンクにする方法を説明します。
- linkclub99
- お礼率71% (40/56)
- CSS
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 hover前とhover後の大きさを統一する必要があると思います。 それと、background-imageはimg要素より後ろにくるので、background-imageを重ねるイメージで。 <style type="text/css"> /* テスト */ div#menu { display:block; background-image:url(img/headerimg01.jpg);/* */ background-repeat:no-repeat; background-color: #eef; width: 718px; height: 400px; } div#menu a { display:block; width: 200px; height: 100px; position: relative; top: 150px; left: 259px; background-image: none; background-repeat:no-repeat; background-color: #fee; text-indent: -9999px; } div#menu a:hover { background-image:url(img/headerimg01.jpg); background-color: #efe; } </style> </head> <body> <div id="menu"> <a href="hoge.html">test</a> </div>
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
通常は718px*400pxのサイズの画像がリンクになってて、hoverする と200px*100pxに縮小するからhoverしなくなって通常に戻るとhover してんじゃんってことになって…かわいそうなheaderimg02.jpgは、 所詮背景画像だからheaderimg01.jpgの後ろで誰にも見てもらえない まま点滅していると。 画像の一部をリンクにするなら、map要素を使いましょう。
お礼
ありがとうございました。 できればクリッカブルマップ（イメージマップ）は使いたくなかったので css で書こうと思っていたのですが、無理そうですね。
補足
ありがとうございました。 できればクリッカブルマップ（イメージマップ）は使いたくなかったので css で書こうと思っていたのですが、無理そうですね。
お礼
ご親切に書いていただきありがとうございました。 a:hoverだけをサイズ指定していたから画像がちらつくような感じになってしまっていたんですね。 たしかにソースを見ると、なるほどって思ってしまう部分もありますね。 勉強になりました。
補足
ご親切に書いていただきありがとうございました。 a:hoverだけをサイズ指定していたから画像がちらつくような感じになってしまっていたんですね。 たしかにソースを見ると、なるほどって思ってしまう部分もありますね。 勉強になりました。