Update: July 18, 2009
JapaneseEnglish
MopHover
downloadtop page
I'm a illustrator
Tested and works with Safari4, Firefox3, Opera9, IE6, IE7, IE8, Google crome.
about Mophover
MopTipSample
MopHoverは、2つの画像を使った単純な、マウスオーバー、マウスアウトの切り替えと、5つの画像を使ったコンテンツのスライド表示、非表示を行います。画像はGIF、JPG、PNGが使えます。このページのDownloadボタン、Top Pageボタン、各タイトルは、MopHoverを使用しています。
詳しくはこのページのソース、または、MopStudioのトップページをご覧ください。
requirement
jquery-1.3.2
what's new
ver. 2.0 - July 10, 2009
Jquery 1.3.2に対応しました。多くのチューンナップとバグフィックスを行い、最新のブラウザに対応しました。
incluide
必要なファイルをヘッダに読み込みます。
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/mopHover-2.0.js"></script>
</head>
setup
2つの画像を使った簡単なホバーアクション
ファイル名の最後が_no（ノーマル時）、_on（マウスオーバー時）の２つの画像を使用します。　<body>に_noのファイルを設置して、IDを設定します。
ヘッダに以下のように記述します
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$(".btnDemo").mopHover({'target':'this'});
});
</script>
</head>

５つの画像を使ったコンテンツのスライド表示＆非表示の切り替え

ファイル名の最後が_dn_no（閉じたノーマル時）、_dn_on（閉じたマウスオーバー時）、_up_no（開いたノーマル時）、_up_on、_up_xx（開いたマウスオーバー時とクリック時。この2つは同じファイル）の5つの画像を使用します。　<body>に開閉コンテンツが閉じた状態ならdn_noを、開閉コンテンツが開いた状態ならup_noのファイルを設置して、IDを設定します。
ヘッダに以下のように記述します
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$(".btnDemo2").mopHover({'target':'childNext', 'slide':true, 'slideTarget':'parentNext'});
});
</script>
</head>
詳しくはこのページのソース、または、MopStudioのトップページをご覧ください。
option
'target': ターゲットを指定します。'this'、'next'、'child'、'childNext'から選びます。'this'はマウスを重ねたもの自身が切り替わります。'next'は次のもの、'child'は、fast child、'childNext'はその次のchildです。
slide: trueかfalseを選びます。'slideTarget'を指定する場合はtrueです。
'slideTarget': スライドで開閉するターゲットを指定します。'this'、'next'、'child'、'childNext'から選びます。
option
| MopStudioのトップページ |
about MopHover
MopTipSample
MopHover can do the simple hover action using 2 images or slide up & down content using 5 images. GIF, JPG, PNG is usable. 'Download button', 'Top Page button' & each titles of this page work with MopHover.
See the sauce of this page, and MopStudio's top page
requirement
jquery-1.3.2
what's new
ver. 2.0 - July 10, 2009
MopHover 2.0 get to be functionally with Jquery 1.3.2. Many tune up & bug fix was done. Tested & works with new browsers.
incluide
Incluide necessary files to header
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/mopHover-2.0.js"></script>
</head>
setup
Simple hover action using 2 images
Prepare the image that contain '_no' end of the file name (normal) & '_on'(mouse over). Set ID.
Describe like the following to <head>.
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$(".btnDemo").mopHover({'target':'this'});
});
</script>
</head>

Slid up & down content with 5images

Prepare the image that contain '_dn_no' end of the file name (closed normal), _dn_on(closed mouse over), _up_no(opened normal),_up_on & _up_xx(opened mouse over & clicked, these are same file) . Put image of '_dn_no', if content is closed. Put '_up_no', if content isopened. Set ID.
Describe like the following to <head>.
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$(".btnDemo2").mopHover({'target':'childNext', 'slide':true, 'slideTarget':'parentNext'});
});
</script>
</head>
See the sauce of this page, and MopStudio's top page
option
'target': Set the target with 'this', 'next', 'child' or 'childNext'. 'this' changes itself. 'next' changes next, 'child' changes fast child, 'childNext' changes secound child.
slide: true or false. If 'slideTarget' is set, true.
'slideTarget': Set the target that slide up & down with 'this','next','child' or 'childNext'.
option
| MopStudioTopPage |
Do you see my English???
If you like it...