ホームページ制作の小技集
＆nbsp;のホームページ制作 ++ 小技集 Tips ++
CSSで超簡単なスワップイメージ
【↑これのやり方です】
メニューなどにマウスを載せると、イメージ画像が変わるというものあがります。
今回はそれをスタイルシートで実現させる方法をご紹介いたします。
XHTML+CSSのホームページを作成するのに必要不可欠なものです。
スタイルシートでと聞くとけんえんしがちな方が多いと思われますが、拍子抜けするくらい簡単ですので、是非覚えていってください。
まず以下のようなイメージを用意します。しかし以下のイメージはHTMLには記述しません。
そしてスワップさせたい場所に<div>タグで囲ったリンクテキストを書きます。その際class="test"またはid="test"のようにdivになにかしらの名前を付けてください。
このソースが以下です。
<div class="test"><a href="[ここにリンク先のアドレス]">[ここに何かテキストを入れる]</a></div>
スタイルシートには以下のように記述します。
<style type="text/css">
<!--
.test a{
background-image:url(../../images/price.png);
width:118px;
height:62px;
margin:0;
padding:0;
text-indent: -9999px;
display: block;
}
.test a:hover{
background-image:url(../../images/price2.png);
width:118px;
height:62px;
margin:0;
padding:0;
text-indent:-9999px;
display: block;
}
-->
</style>
これだけの記述で以下のようなスワップイメージが出来上がります。
もしマウスをクリックしたときにも画像を変えたいと思うのでしたら、さらに以下のソースをスタイルシートに加えてください。（上記の画像をクリックすると三枚目の画像が現れます。）
.test a:active{
background-image:url(../../images/service1.png);
width:118px;
height:62px;
margin:0px;
padding:0px;
text-indent: -9999px;
display: block;
}
ポイントはスタイルに記述されている「text-indent: -9999px;」と「display: block;」です。
これは何を意味するかというと、リンクをつけたテキストを「text-indent: -9999px」で画面のずっと左の方に隠し「display: block」で画像を画面上にとどめます。
スタイルの a、a:hover、a:active これらを使い分けることさえできれば、マウスオーバーしたときにボックスの背景の色を変えたり
いろいろなことができます。
