ロールオーバーと云えばJavaScriptを使用しなければいけないと思っていませんか・・・
今は、スタイルシートで可能に成りました
- ロールオーバーの手順・・・
- 先ず、画像を三つ用意します・・・
- 元画像・・・
- マウスオーバー時の画像・・・
- 透過画像（ダミーの画像）・・・
※この透過画像を右クリックして「画像を保存」して利用して下さい。
- 元画像・・・
- スタイルシートは以下のように成ります
これを<HEAD>～</HEAD>の間に記述します。
※ クラスはここでは「nashi」としていますが、任意で構いません
<style type="text/css">
＜!--
a.nashi {
display:block;
background-image : url(元画像);
background-repeat : no-repeat;
}
a:hover.nashi {
background-image : url(マウスオーバー時の画像);
}
--＞
</style>
- HTMLは以下のように記述します
これを<BODY>～</BODY>の間に記述します。
- ここで透過画像のダミー画像を指定しておきます
- 幅・高さは表示がする画像のサイズに指定します
＜a href="#" class="dummy.gif" width="95" height="76" border="0"＞
＜/a＞
- すると,下の画像のように成ります
※ 画像をクリックして別窓を開き、実際に試してみて下さい
←ポインターを乗せる前の元の画像
←ポインターを乗せるとこの画像
- 先ず、画像を三つ用意します・・・
今日の小技は如何でしたか？
