マウスオーバー/アウトによる画像の変更 : jQuery

Tweet

Pocket

マウスオーバーすると画像を変更する処理。

<ul id="nav">
    <li><a href="●●●"><img src="exsample1.png" alt="ナビ1" /></a></li>
    <li><a href="●●●"><img src="exsample2.png" alt="ナビ2" /></a></li>
    <li><a href="●●●"><img src="exsample3.png" alt="ナビ3" /></a></li>
</ul>

exsample1.png～exsample3.pngと同じディレクトリにexsample1_over.png～exsample3_over.pngを配置する。

$(function(){
    if ($('ul#nav')) {
        var imgTags = $('ul#nav img');
        imgTags.each(function (i) {
            $(imgTags[i]).mouseover(function () {
                var path = $(this).attr('src');
                var pathArr = path.split('.png');
                var path = pathArr[0] + '_over.png';
                $(this).attr('src', path);
            });
            $(imgTags[i]).mouseout(function () {
                var path = $(this).attr('src');
                var pathArr = path.split('_over');
                var path = pathArr[0] + '.png';
                $(this).attr('src', path);
            });
        });
    }
});