On-Mouseでアイコンに変化を


リンクのテクニックとして文字の色を変えたり、文字列の色を変えたりして見映えを良くします。このテクニックは、「4.スタイルシートを使いましょう   ● リンクへのスタイルシート適用」(→こちらです)で説明しました。これで十分と言えば十分かもしれませんが、Javaを使うとより視覚に訴える事ができます。例えば、On-Mouseによって、マウスポインタを乗せたらリンクを示す画像が変わる、と言うテクニックはどうしても使いたかったのですが、Javaは使いこなしません。そこで、他の方法を考えました。

判り易くするために4マスの表を作ります

HTML文書は次の通りです。

<table cellspacing=”5” summary=”表” align=”center”>
<tr><td class=”td1”>水 色</td>
<td class=”td2”>
<a href=”mailto:homepage@try.jp” class=”sample”>メールはこちらへ</a></td></tr>
<tr><td class=”td3”>銀 色</td>
<td class=”td4”>黄 色</td></tr></table>

次に、CSS文書は次の様にします。

table { width: 400px; height: 200px; text-align: center; vertical-align: middle;
font-size: 12pt; font-weight: bold; }
table, td {border: solid 1px navy; }
td { width: 200px; height: 100px; }
.td1 {background-color: aqua; }
.td3 {background-color: silver; }
.td4 {background-color: yellow; }

画面

この結果の画像は右の通りで、これから、この中の「メールはこちらへ」のマスを触ります。狙いは、このマスの背景色がマウスの動きによって変わってくれる事です。

まず文字の背景を変える為に、CSS文書に次の3行を追加します。

a:link { background-color: aqua; text-decoration: none; }
a:visited { background-color: silver; text-decoration: none; }
a:hover { background-color: yellow; text-decoration: none; }

これにより、マスは、
リンク前 → マウスを上に置く → リンク後 で下の様に変化していきます。

画面 画面 画面

次に、HTML上で、「メールはこちらへ」の前後に半角ブランク6つづつ、半角ブランクを2つ含む行を上下に各1行づつを入れてみます。

<a href=”mailto:homepage@try.jp” class=”sample”> &#160;&#160;<br />&#160;&#160;&#160;&#160;&#160;&#160;メールはこちらへ&#160;&#160;&#160;&#160;&#160;&#160;<br />&#160;&#160; </a>

画面

 

これにより、画面上のマス内は右の様に変わりました。この画面で問題点を整理しながら、対策を取って行きます。

1.マスの中で文字の左右が背景色で埋まり切っていない

解決方法・・文字の背景として左右マス一杯までを認識させる必要があり、

      その手段は文字のpaddingプロパティを使います。HTML文書中の

      半角ブランクと改行を全て取り去って元に戻し、CSS文書中の

      a:linkの記述に左右のpaddingを追加して下の様に変えます。

a:link { background-color: aqua; text-decoration: none; padding-left: 33px; padding-right: 33px; }

画面

画面上のマス内は右の様に、左右一杯まで背景色で埋まりました。尚、paddingの値は実際に試行錯誤で決めます。

2.マスの中で文字の上下が背景色で埋まり切っていない

解決方法・・左右マス一杯まで背景色で埋めた方法を上下でも使います。

      すなわち、paddingプロパティを上下にも使う方法でCSS文書中の

      a:linkの記述にさらに下の様に上下のpaddingを追加ます。

a:link { background-color: aqua; text-decoration: none; padding-left: 33px; padding-right: 33px; padding-top: 40px; padding-bottom: 40px; }

画面

結果としては、文字から下の部分はマス内一杯まで背景色で埋まりましたが、上部は全然埋まりません。この理由は、行の高さが、現在文字の大きさ分しかない為です。

3.マスの中で文字の上も背景色で埋めたい

解決方法・・文字の高さもマス一杯になる様に変更する。

      その手段はtableのline-heightプロパティを使います。CSS文書中の

      tableの記述に下の様にline-heightを追加ます。

table { width: 400px; height: 200px; text-align: center; vertical-align: middle; font-size: 12pt; font-weight: bold; line-height: 596%; }

画面

ここまでで、背景色をマス一杯塗ることが出来るようになりました。上下のpaddingの値、line-heightの値は、やはり、試行錯誤で決めます。

CSS文書中で、a:linkの対策が済みましたので、a:visitedとa:hoverにも同様の対策を入れます。その結果を画面で確認しますと下の通りです。
リンク前 → マウスを上に置く → リンク後 での画面の変化を示します。

画面 画面 画面

さて、ここまで「背景色」を変化させてきましたが、ここで、念願の「画像」の変化に挑戦します。

基本的には、ここまでCSS文書中で背景色の記述をしていたものを、背景画像の記述に変えれば良いのです。今回は、大きさ196×98で、a.hover用にカラーのボタンスイッチ画像sample1.gif、a.linkとa.hover用にa.hover同じ図柄の白黒画像sample2.gifを用意しました。CSS上の記述は次の様になります。

a:link { background-image: url(../pics/sample2.gif); background-repeat: no-repeat; background-position: bottom; text-decoration: none; }
a:visited { background-image: url(../pics/sample2.gif); background-repeat: no-repeat; background-position: bottom; text-decoration: none; }
a:hover { background-image: url(../pics/sample1.gif); background-repeat: no-repeat; background-position: bottom; text-decoration: none; }

その結果の画面は下の様に、
リンク前 → マウスを上に置く → リンク後 にともなって変化します。

画面 画面 画面

ページトップへ

               目次へ戻る               →次ページへ

コーナー