demo

準備

htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。

html

	<p class="button"><a href="#">ボタン</a></p>

その他マウスオーバーしたときの大きめの画像を用意します。
ここでは「bg.jpg」という名前で1000×1000の画像を使用します。

bodyのbackgroundを指定する方法

一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。
jQueryでimageとpositionの設定をしますので、cssでその他の設定をしておきます。

css

	body {
		background: #5794f2 no-repeat;
	}

jQueryのコードは次のようになります。

javascript

	$(function() {
		var imgWidth = 1000;
		var imgHeight = 1000;
		$('.button a').hover(function(e){
			var x = $(this).offset().left - (imgWidth/2) + ($(this).width()/2);
			var y = $(this).offset().top - (imgHeight/2) + ($(this).height()/2);
			var bgPos = $('body').css('backgroundPosition');
			//IEとそれ以外で条件分岐
			if (bgPos) {
				$('body').css({
					'background-image':'url(img/bg.jpg)',
					'background-position': x+ 'px ' + y + 'px'
				});
			} else {
				$('body').css({
					'background-image':'url(img/bg.jpg)',
					'background-position-x': x + 'px',
					'background-position-y': y + 'px'
				});
			}
		}, function() {
			$('body').css({
				'background-image':'none'
			});
		});
	});
1～2行目
画像サイズを指定します。
1000×1000の画像を使用しますので、それぞれ1000と指定しています。
5～6行目
配置する場所です。
要素は左上が原点となりますので、画像の半分とボタンの半分を引くことで中心に配置できます。
7～19行目
bodyの背景画像を配置しています。
IEでは「background-position-x」と「background-position-y」に別けて指定しなくてはいけないので、それぞれのブラウザ用に分岐しています。

フェードイン&フェードアウトして表示

バックグラウンドに透明度は設定できないので、フェードイン&フェードアウトしたいときは新たに画像用の要素を追加します。
cssで新たに下記を追加します。

css

	html, body {
		height: 100%;
	}
	#background {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #efb357 url(img/bg2.jpg) no-repeat;
		width: 100%;
		height: 100%;
	}

jQueryのコードはこうなります。

javascript

	$(function() {
		$('body').append('<div id="background"></div>');
		var bg = $('#background');
		//全体の高さがbodyより大きかったらbgを全体の高さにする
		if ($('#wrap').outerHeight(true) > $('body').outerHeight(true)) {
			bg.height($('#wrap').outerHeight(true));
		}
		bg.css({'opacity': 0});
		var imgWidth = 1000;
		var imgHeight = 1000;
		$('.button a').hover(function(e){
			var x = $(this).offset().left  - (imgWidth/2) +  ($(this).width()/2);
			var y = $(this).offset().top - (imgHeight/2) +  ($(this).height()/2);
			var bgPos = bg.css('backgroundPosition');
			//IEとそれ以外で条件分岐
			if (bgPos) {
				bg.css({
					'background-position': x+ 'px ' + y + 'px'
				});
			} else {
				bg.css({
					'background-position-x': x+ 'px',
					'background-position-y': y + 'px'
				});
			}
			bg.stop().animate({opacity: 1},500);
			
		}, function() {
			bg.stop().animate({opacity: 0},500);
		});
	});

要素を追加したのでそのままleftとかtopに指定した方が楽ですが、画面端のボタンだとスクロールバーが表示されたりするので背景画像で設定した方が無難だとおもいます。