タグ :

シンプルなロールオーバー : rollover

投稿日 : 2013年1月1日 | 更新日 : 2013年01月20日 前のページへ戻る

Pocket

シンプルなロールオーバーのサンプル。


jQuery(function($) {
    $.fn.rollover = function(options) {
        options =  options || {
            selector: 'img',
            suffix: '_over',
            extension: 'png'

        };
        $(options.selector, this).each(function() {
            var dir;
            var path;
            $(this).hover(function() {
                dir = $(this).attr('src').split('.' + options.extension)[0];
                path = dir + options.suffix + '.' + options.extension;
                $(this).attr('src', path);
            }, function() {
                dir = $(this).attr('src').split(options.suffix)[0];
                path = dir + '.' + options.extension;
                $(this).attr('src', path);
            });
        });
    };
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="rollover.js"></script>

<script>
    jQuery(function($) {
        $('#rollover').rollover();
    });
</script>

</head>
<body>
    <ul id="rollover">
        <li><img src='image.png'></li>
        <li><img src='image.png'></li>
    </ul>
</body>
</html>

Gistのサンプルは少し変更。

» Gist

JavaScript,Programming | 固定リンク | Comments (0)

このページの上へ移動

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


このページの上へ