画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化

質問

画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化が現れるようにしたいのですが方法がわかりません。どなた様かご指導のほどよろしくお願いいたします。

今回画像を以下に掲載させて頂きました。よろしければ見てみてください。
http://desktop10.web.fc2.com/11.gif

上記を見て頂くと、HOMEの下に赤い線が入っています。マウスポインタを合わせたときに上記のようにしたいと考えております。よってマウスポインタをあわせないときは、赤い線が表示されないようにしたいと考えております。このような場合はどのような記述が必要なのでしょうか？

私はhtmlには以下のような記述をしました。

<a href="http://index.html"><img src="img/test.gif" alt="ボタン" width="115" height="48" /></a>

どなた様か、ご指導のほどよろしくお願いします。

回答No.1

ponzuinfo · ベストアンサー

403で画像は見れません（fc2はたしか直リンク禁止だったとおもいます）
CSSを使い実装することができます
”ロールオーバー”で検索してみてください

お礼

ponzuinfo様
ありがとう御座いました。ロールオーバーと検索したところ確かに色々と出てきました。
よって出来たといえば出来たのですが、わたしとしては、その画像を横に並べたく方法がわからず難儀しております。
ですが、お蔭様で大発展が出来ました。
ありがとう御座いました

回答No.2

ponzuinfo

>>その画像を横に並べたく方法がわからず難儀しております。
[ロールオーバーの画像1][...2][...3]
と横に並べるだけでしたら、同じくCSSで実装できます。
"CSS　回り込み"などで検索をすれば良いかと。
もっと簡単な方法としてはテーブルタグを使う方法がありますが、最近では時代遅れな方法です。