フォームのボタンはCSSである程度デザインをかえれるけど、いまいちなので「type=image」をよく使うけど、デフォルトのボタンのようなクリック感がなくなっていまいます。

ということで、クリック感をだすついでにロールオーバーでも画像を入れ替えるものを作ってみました。

jQuery – フォームの画像ボタンをロールオーバーする

JavaScript

<script language="JavaScript">
//画像をプリロード
function preload(Dir, imgs){
	var d = document;
	for(var i = 0; i< imgs.length; i++){
		var imgObj = new Image();
		imgObj.src = Dir+imgs&#91;i&#93;;
			alert(imgObj.src);
	}
}
window.onload = function(){ preload("./", &#91;"d_down.gif","d_over.gif"&#93;) }

$(function (){
	//マウスが乗ったら…
	$('form :image').mouseover(function() {
		//up画像
		var upimgSrc = $(this).attr("src");
		//over画像
		var overimgSrc = upimgSrc.replace("up", "over");
		//down画像
		var downimgSrc = upimgSrc.replace("up", "down");
		//over画像に入れ替え
		$(this).attr("src", overimgSrc);
		//念のためアップ画像をバックグラウンドに設定
		$(this).css("background-image", "url("+upimgSrc+")");
		//マウスが押されたら…
		$(this).mousedown(function() {
			//down画像に入れ替え
			$(this).attr("src", downimgSrc);
			//マウスアップしたら…
			$(this).mouseup(function() {
				//up画像に入れ替え
				$(this).attr("src", upimgSrc);
			});
		});
		//マウスが外れたら…
		$(this).mouseout(function() {
			$(this).attr("src", upimgSrc);
		});
	});
});
</script>

ボタンに使う画像は「○○○_up.gif」「○○○_over.gif」「○○○_down.gif」と「○○○」部分を同じにしておきます。HTML側では「type=image」で「○○○_up.gif」を指定します。

<input type="image" alt="ボタン" width="206" height="106" src="./d_up.gif" />

ポイントはボタンに使う画像をプリロードしておくこと。プリロードしておくことでアクションが起こってから読み込むタイムラグをなくします。

あとはクリックしたときの点線を消したいけど、IEでは無理みたいなので仕方がない。一応サンプルではCSSで「outline: none;」を指定しているのでFirefoxでは点線はでません。

まあ点線が出た方がクリックした安心感はでるので、ここはよしとしておきましょう。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。