jQuery Plugin hovtive 1.1
Mouse Over, Downで画像を入れ替えるプラグインのバグフィックス版です。
以下簡単なサンプル。
-
<!DOCTYPE HTML>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>hovtive | DESIRERY</title>
-
<script type="text/javascript" src="/jquery-1.4.2.min.js"></script>
-
<script type="text/javascript" src="/hovtive-1.1.min.js"></script>
-
<script type="text/javascript">
-
$(function() {
-
$(".hovtive").hovtive(
-
{
-
flag: false,
-
hover: '_over',
-
active: '_down',
-
stay: '_stay'
-
}
-
);
-
});
-
</script>
-
</head>
-
-
<body>
-
<nav>
-
<ul>
-
<li><a href=""><img src="/nav_01_stay.png" alt="HOME" width="69" height="27"></a></li>
-
<li><a href=""><img src="/nav_02.png" alt="ABOUT" width="69" height="27"></a></li>
-
<li><a href=""><img src="/nav_03.png" alt="CONTACT" width="69" height="27"></a></li>
-
</ul>
-
</nav>
-
</body>
-
</html>
基本はaタグにClass hovtiveを追加して$(".hovtive").hovtive();な形で動かしています。1.0から1.1への変更はデフォルトのプロパティを変更しました。上記サンプルの物がデフォルトのプロパティになります。
- Flag(boolean): Mouse Down EventをDisable or Enabled
- hover: Mouse Overの画像でファイル名の末尾を指定
- active: Mouse Downの画像でファイル名の末尾を指定
- stay: Stay表示(HomeであればHome Buttonを表示)の画像名を指定
4のStayについては_stayがファイル名末尾にあればMouse Over, DownのEventは発生しません。ナビゲーションでstay表示をimgタグでする場合ファイル名末尾に_stayといれておけばマウスイベントが起きないため画像の入れ替えはしなくなります。
