スマホでタップ時に画像差し替え

PC版でよく使うロールオーバー時に画像差し替えjsをスマホでのタップ版でつくってみる。

HTMLは共通でimg要素にbtnクラスを

<!-- html -->
<a href="#"><img src="./image/btn.png" class="btn"></a>

JS側はhoverイベントだった箇所をtouchstartとtouchendに

// js
function touchImage(){
	var preLoad = new Object();
	$('img.btn').not("[src*='_on.']").each(function(){
		var imgSrc = this.src;
		var fType = imgSrc.substring(imgSrc.lastIndexOf('.'));
		var imgName = imgSrc.substr(0, imgSrc.lastIndexOf('.'));
		var imgOver = imgName + '_on' + fType;
		preLoad[this.src] = new Image();
		preLoad[this.src].src = imgOver;
		$(this).bind('touchstart', function() {this.src = imgOver;});
		$(this).bind('touchend', function() {this.src = imgSrc;});
	});
}
$(document).ready(touchImage);

スマホなのであんま画像使わんかもしれんですが