jQueryプラグインのhovtiveをVersion 2.1にアップデートしました。jQuery1.4.2で動作確認しています。
hovtive 2.0では機能追加と改善をしています。
- New: 画像のプリロード(キャッシュに先読み)
- Improved: メソッドをlive()へ変更
- Fixed: バグフィックス
hovtive 2.1では高速化とバグフィックスをしています。
- Improved: eachからforへ変更
- Fixed: input:[src]要素でClassを記述していなくてもhovtiveが動いてしまうバグ
2.0では楽にeachでやっていましたが気になったのでforに変更。15倍以上の速度差があったので。他jQuery CoreのContext指定の動作を勘違いしていたためのバグがあったので変更しています。
詳細は後ほど追記します。たぶん。
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といれておけばマウスイベントが起きないため画像の入れ替えはしなくなります。
FF13発売だったんですねー。PS3ないけど。外観のデザインがまた変わったら考えよう。
で、ここフルフラッシュのサイトなんですが画面をクリックでスクロールバーが出ます。たまにこういったサイトがあるんだけどFirefoxではoutlineを消さないとこういった残念なサイトになります。Firefoxは対象外ですと言われたらそれまでだけど。回避方法は下記CSSを加えるだけ。
-
Element {
-
outline:none;
-
}
こんな簡単なのでFlashだからと言って動作確認の手を抜きすぎだろ。といった感じが拭えない。その他HTMLではナビゲーションなどfloatで横並びした際マウスダウンで落ちるとかあったりするけどそれもこれが原因。かといってリンクでoutlineを消すのは場合によって微妙なのでoverflow:hiddenではみ出したoutlineは切れる用にしておけば問題ないです。
