リンクの部分にマウスオーバーすると、右下にチョコっと動くときがあります。(前にメニューで使っていました)
これはスタイルシートで設定しているのです。
どこにマウスが触れているかがよくわかるので、私が作っているホームページでは多用している方法です。
同時に色が変わればもっとわかりやすいと思います。
マウスがリンク部分に乗ったとき(＝マウスオーバーのとき)は、スタイルシート中の「a:hover」で指定します。
相対的な位置を指定する「position:relative」を指定し、
移動させる量は、「left:1px」(左から1px)、「top:1px」(上から1px)で指定します。
移動させる量は適当に変えてくださいね。
→
position:relativeの詳しい説明
 |
 |
 |
 |
<STYLE type="text/css">
<!--
A {COLOR: #3e4755; TEXT-DECORATION: none; BORDER-BOTTOM: #91a4e3 1px dotted;}
A:visited {COLOR: #3e4755; TEXT-DECORATION: none; BORDER-BOTTOM: #e87c89
1px dotted;}
A:hover {COLOR: #91a4e3; TEXT-DECORATION: none; BORDER-BOTTOM: #91a4e3
1px dotted;}
a.img {text-decoration:none; BORDER-BOTTOM: #ffffff 1px solid;}
a.img:link {background-color:#ffffff; BORDER-BOTTOM: #ffffff 1px solid;}
a.img:visited {background-color:#dddddd; BORDER-BOTTOM: #ffffff 1px solid;}
a.img:hover {left:1px; top:1px; position:relative; background-color:#98cbf8; BORDER-BOTTOM: #ffffff 1px solid;}
a.img:active {background-color:#ffff99; BORDER-BOTTOM: #ffffff 1px solid;}
-->
</STYLE>
<A href="#" class="img"><IMG src="../img/icon/t_home.gif" width="42" height="16" border="0"></A><BR>
<A href="#" class="img"><IMG src="../img/icon/t_text.gif" width="39" height="16" border="0"></A><BR>
<A href="#" class="img"><IMG src="../img/icon/t_mail.gif" width="41" height="16" border="0"></A><BR>
<BR>
<A href="#">リンク部分です</A>
|
 |
 |
 |
 |
