「マウスがボタンの上に来たら星のアニメがでるようにしたい」と
以前、言われたことがあります。
色々、探したのですが
マウスオーバーで画像が変わるというものは
多くあるのですが、
マウスオーバーで画像を追加するというものは
なかったみたいので作ってみました。
イメージはこんな感じ
1.ボタンリストを作ります
<ul id="navi" class="clearfix"> <li><a href="リンク先URL"><img src="images/btn1.png" alt="btn1"></a></li> <li><a href="リンク先URL"><img src="images/btn2.png" alt="btn2"></a></li> <li><a href="リンク先URL"><img src="images/btn3.png" alt="btn3"></a></li> <li><a href="リンク先URL"><img src="images/btn4.png" alt="btn4"></a></li> </ul>
今回はリストタグで作ってますが
その都度変えて問題ないです。
2.マウスオーバー用のJavascriptを作ります
jQueryのマウスオーバーの書き方は
$(セレクタ名).hover(
function () {
//マウスオーバーのとき
},
function () {
//マウスが離れたとき
}
);
通常はマウスオーバーのときに画像を切り替えるというものですが、
今回はマウスオーバーのときに
アニメーション画像を上に重ねて表示する。
マウスが離れてたら、画像をなくす。
という感じでJavascriptを記述しました。
↓上のHTMLに合わせるとこんな感じです。
$(function() {
$('#navi li a').hover(
function(){
$(this).css('position', 'relative');
$(this).prepend('<img src="images/hover.gif" class="front">');
},
function(){
$('.front').remove();
$(this).css('position', '');
}
);
}
);
マウスオーバーになった時に、CSSのposition:relativeをつけます。
これは、上に重ねる画像の位置の基準をマウスオーバーした時の画像にするためです。
次に、上に重ねるimgタグを追加します。
マウスが離れたときは、
追加したCSSとimgタグを削除します。
3.リスト用のCSSを作ります
.front {
position: absolute;
top: -75px;
left: 60px;
}
CSSでposition: absoluteにしたものは
浮いた状態になっていると思って下さい。
浮くことによって画像を重ねることができます。
そして親がposition:relativeになっていれば
親を基準として位置を指定できます。
今回親がインライン要素のアンカータグなので
高さをを持っていない状態です。
なので、下の画像の左下が基準になります。
追加した画像タグにfrontクラスをしているので
CSSで位置調整します。
TOPの指定がマイナスになるので
位置が決めにくいという場合は
アンカータグをブロックレベル要素にしてあげると
位置を決めやすくなります。
結果はほとんど変わりません。
今回のデモだと
li a {
width: 220px;
height: 92px;
display: block;
}
4行目のところでブロックレベル要素にすることで
高さの指定が有効になります。
あとは上に重ねる画像のCSSを以下のように指定します。
.front {
position: absolute;
top: 5px;
left: 60px;
}
位置の指定はこんな感じです。
今回はアニメーション画像でやりましたが、
他にも使えそうな気がします。
何か面白そうなことできたら
記事に追加しますね。
今回、アニメーションGIFを作るのに便利なサイトがあります。
・chimply
簡単にローディング画像をつくれるので
結構、重宝しています。
