- ベストアンサー
マウスをのせた時に画像の色を変える
- 初心者でも簡単に実装できる方法を教えてください。マウスをのせた時に画像の色が変わるようにしたいです。
- readmoreの画像を使用し、ホバー時に色を変えたいです。どのような方法でも構いません。
- マウスをのせた時に画像の色を変える方法を教えてください。初心者でも分かりやすい実装ができると助かります。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
なんかまずPHPするまえにHTML勉強するべきだと思うけど・・・ imgがタグ入れ子になってる理由は何だろう。 一般的には、CSSをつかってhover指定を行う。 aのdisplayをblockにして、画像サイズに合わせたheight/widthを指定。状況に合わせてfloatを指定。 画像を背景としてい指定する。文字はネガティブマージンなりでふっとばす。 マウスオーバー時の画像を別に指定して、hoverでその画像を背景に指定する。 JavaScriptでmouseoverとmouseoutでそれぞれsrc書き換えをすることもある。
その他の回答 (1)
- toast5
- ベストアンサー率37% (239/638)
ロールオーバーには PHP 使ったり Javascript を使ったり、いろんな方法がありますが、 僕が知ってるいちばん簡単な方法はこういうの。IE で機能するのかどうか確認したことはありませんが、 僕の Mac 環境では機能します。 <html> <head> <title>test</title> <style type="text/css"> <!-- a img {border:none;} a img {opacity: 1; /* IE以外透過設定 */ filter: Alpha(opacity=100); /* IE用透過設定 */ } /*a:hover {background: #FFF; }*/ a:hover img {opacity: 0.4; /* IE以外透過設定 */ filter: Alpha(opacity=60); /* IE用透過設定 */ } --> </style> </head> <body> <a href="http://www.yahoo.co.jp/"><img src="http://i.imgur.com/xxrNS.jpg" width="640" height="472" border="0" alt=""></a> </body> </html>
お礼
回答ありがとうございました。勉強し直してからやってみます。
お礼
回答ありがとうございました。勉強し直してからやってみます。