画像が切り替わるボタン

CSS

hoverでリンク画像を切り替える
http://www.nishishi.com/css/link-image-hoverchange.html

みたいなことをやってるサイトや、やり方を紹介しているサイトは幾つか見つけたが、どれもリンクを対象にしていたので、参考にしつつ試してみた。

やりたいことはほとんど一緒なんだけど、違う場所はformをsubmitしたいということ。ただのリンクじゃこれはできないのでね。

スタイルシート

.hoge{
	width:81px;
	height:50px;
	background:  url(/img/on.png) ;
	text-indent: -9999px;
	border:none;
	display:block;
}
.hoge:hover{
	text-indent: 0px;
}

html

<form id="testForm" method="post" action="/index/test" accept-charset="utf-8">
	<div class="hoge">
		<input type="image" src="/img/on2.png" name="next" />
	</div>
</form>

.hoge で中身の要素を画面の外にすっ飛ばしてやって、背景画像を見せる。

.hoge:havor で画面外の要素を元の位置に戻して、背景画像の上にかぶせる。

マウスを乗っけると、画面外においてあるイメージボタンが戻ってきて、入れ替わったように見せている。