リンクの部分にマウスオーバーしたときに、画像の背景色を変えます。
…といきたいところですが、普通の画像に背景色を指定しても表示されません。
下の画像にはリンクを設定し、背景色も指定しているのにマウスを乗せても色は変わりません。
では、次の画像はどうでしょう。
上と同じ設定をしています。
こちらは文字の周りの部分の色が変わりますよね。
これは左のメニュー部分に使っている方法なのですが、画像に細工(?)がしてあります。
色を変えて表示させたい部分を透過して画像を作っています。
透過されている部分が透けて色が変わる…というわけです。
この方法を使う場合は、リンクの部分に背景色を設定させるだけでなく、このような透過された画像を用意する必要があります。
背景色の指定方法は、「background-color」を使います。
→
マウスオーバーでリンク部分の背景色を変える (文字編)
 |
 |
 |
 |
<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:link.link01 {background-color:#ffffff; BORDER-BOTTOM: #ffffff 1px solid;}
a:visited.link01 {background-color:#dddddd; BORDER-BOTTOM: #ffffff 1px solid;}
a:active.link01 {background-color:#ffff99; BORDER-BOTTOM: #ffffff 1px solid;}
a:hover.link01 {background-color:#98cbf8; BORDER-BOTTOM: #ffffff 1px solid;}
a:link.link02 {background-color:#ffffff; BORDER-BOTTOM: #fee6e6 1px solid;}
a:visited.link02 {background-color:#dddddd; BORDER-BOTTOM: #fee6e6 1px solid;}
a:active.link02 {background-color:#ffff99; BORDER-BOTTOM: #fee6e6 1px solid;}
a:hover.link02 {background-color:#98cbf8; BORDER-BOTTOM: #fee6e6 1px solid;}
-->
</STYLE>
<A class="link01" href="#"><IMG src="img/t_home.gif" width="42"
height="16" border="0"></A><BR>
<A class="link01" href="#"><IMG src="img/t_link.gif" width="40"
height="16" border="0"></A><BR>
<A class="link01" href="#"><IMG src="img/t_design.gif" width="53"
height="16" border="0"></A><BR>
<BR>
※ こちらも透過gifを使っています。<BR>
<TABLE border="1" width="300">
<TR>
<TD bgcolor="#fee6e6" height="30">
<A class="link02" href="#"><IMG src="img/html_home.gif" width="33"
height="13" border="0"></A>
<A class="link02" href="#"><IMG src="img/html_function.gif"
width="61" height="13" border="0"></A>
<A class="link02" href="#"><IMG src="img/html_attribute.gif"
width="67" height="13" border="0"></A>
<A class="link02" href="#"><IMG src="img/html_back.gif" width="32"
height="13" border="0"></A></TD>
</TR>
</TABLE>
|
 |
 |
 |
 |
