恐らく、画像にホバリングした時点の画面サイズで"on out"を切り替えたいのではないでしょうか?
上記のサンプルコードだと、htmlファイルを読み込んだ時点の画面サイズで、ホバリングのイベント登録がされたり、されなかったりしているようです。
簡単に言うと、ブラウザの更新ボタンを押した時、画面サイズが960px以上だと期待する操作になって、960px以下だと全く反応しないかと思います。以降は画面サイズを変えても期待する操作にならないかと。
そこで、画像にホバリングした時点で画面サイズを取得し、その数値に併せてon out を切り替える為には、
$(function(){
$("img,input[type='image']").hover(
function(){
if($(window).width() > 960) {
if ($(this).attr("src")) {
$(this).attr("src", $(this).attr("src").replace("_out.", "_on."));
}
}
},
function(){
if($(window).width() > 960) {
if ($(this).attr("src") && !$(this).hasClass("current")) {
$(this).attr("src", $(this).attr("src").replace("_on.", "_out."));
}
}
}
);
});
これで恐らく期待する操作になるかと思います。
ただし、
if($(window).width() > 960) {}
この部分を繰り返し書いているのであまり綺麗なコードではありません。
繰り返しを避けるには、$(window).resize()内で処理するのが良いかもしれません。
$(function () {
$(window).resize(function () {
//画像のホバーイベントを解除
//これを入力しないとリサイズの度にイベントが何個も登録されてしまう。
$('img.resize-onout-img').off('mouseenter mouseleave');
if($(this).width() > 960) {
//960より画面が大きい場合の処理
//画像のホバーイベント登録
$('img.resize-onout-img').hover(function () {
if ($(this).attr("src")) {
$(this).attr("src", $(this).attr("src").replace("_out.", "_on."));
}
}, function () {
if ($(this).attr("src") && !$(this).hasClass("current")) {
$(this).attr("src", $(this).attr("src").replace("_on.", "_out."));
}
});
}
});
//初回のイベント発火
$(window).trigger('resize');
});
/////////////// html
<img class="resize-onout-img" src="images2_out.jpg">
当方Javascriptは全くの素人です。とありますので、ここまでする必要はありませんが、後々意味がわかるかと思います。