ロールオーバーのJava Scriptの書き方

質問

ロールオーバーに関するJava Scriptの書き方教えてください。

$(".js_rollover_png").hover(function(){
$(this)[0].src=$(this)[0].src.replace("-off.png", "-on.png");
},function(){
$(this)[0].src=$(this)[0].src.replace("-on.png", "-off.png");
});

上記でPC上では問題ないのですが、iphoneなどでロールオーバー画像をクリックしページ移動後、
元ページに戻るとロールオーバー画像が消えて見えなくなってしまいます。

初心者なので少しどうしたらいいか煮詰まってしまいましたので、お知恵をお貸し頂けませんでしょうか。

できましたら、どのように記述すればいいか記述例を教えていただければ幸いです。

ヨロシクお願い致します。

補足ちなみにiphoneなどスマホ、タブレットでロールオーバーは再現されなくてもいいです。
クリック後画像が消えなければそれで満足です。

回答No.1

CyberCypher

//SmartPhoneCheckの関数を作成
function isNotSP() {
var userAgent = navigator.userAgent.toUpperCase();
//UserAgentにSmartPhoneを示す文字列が含まれていないならTRUEを返却
return ua.indexOf('IPHONE') === -1 && ua.indexOf('IPAD') === -1 && ua.indexOf('ANDROID') === -1 && ua.indexOf('MOBILE') === -1;
}

//元々のJqueryの処理をSmartPhone以外なら処理するように変更
$(".js_rollover_png").hover(function(){
if(isNotSP()){
$(this)[0].src=$(this)[0].src.replace("-off.png", "-on.png");
}
},function(){
if(isNotSP()){
$(this)[0].src=$(this)[0].src.replace("-on.png", "-off.png");
}
});