ロールオーバーボタンの作り方

ロールオーバーボタンの作り方

画像をbackgroud-positonで動かしていく方法は、地味にめんどいので、画像切替型で。

で、使う画像を必要か否かは別として適当に用意しておきます。
83.gif 83.gif
84.gif 84.gif
85.gif 85.gif
86.gif 86.gif
87.gif 87.gif
88.gif 88.gif
89.gif 89.gif
90.gif 90.gif

ロールオーバーボタン作成(CSS、visibility使用)

javascriptを使わずに、ロールオーバーボタンを実装できる方法。予め、背景に画像を用意(つまり、2枚重ねに)、しておき、hover擬似クラスにて、マウスが重なったら上の画像を見えなく(hidden)して、下の画像を表示させる方法。

  • 84.gif
  • 83.gif
  • 85.gif

<div id="z44" class="clearfix">
<ul class="z43">
<li class="z45"><a href="#"><img src="84.gif" alt="84.gif" /></a></li>

<li class="z46"><a href="#"><img src="83.gif" alt="83.gif" /></a></li>
<li class="z47"><a href="#"><img src="85.gif" alt="85.gif" /></a></li>
</ul>
</div>
/*cssファイルへの記述*/
ul.z43 {
	margin-left:20px;
	}
ul.z43 li {
	list-style-type:none;
	float:left;
	display:inline;
	}
ul.z43 li.z45 {
	background:url(../comu/88.gif) no-repeat;
	}
ul.z43 li.z46 {
	background:url(../comu/87.gif) no-repeat;
	}
ul.z43 li.z47 {
	background:url(../comu/89.gif) no-repeat;
	}
ul.z43 li a {
	position:relative;
	display:block;
	}
ul.z43 li a:hover img {
	visibility:hidden;
	} 
div#z44 {
	width:500px;
	background:url(../comu/86.gif) top left repeat-x;
	margin:20px 0;	
	}

ロールオーバーボタン作成(jQuery使用)

mouseover()とmouseout()命令によって、img要素のsrc属性をその都度切り替える方法です。

  • 84.gif
  • 83.gif
  • 85.gif

<div id="z44" class="clearfix">
<ul class="z48">
<li><a href="#"><img src="84.gif" alt="84.gif" /></a></li>
<li><a href="#"><img src="83.gif" alt="83.gif" /></a></li>

<li><a href="#"><img src="85.gif" alt="85.gif" /></a></li>
</ul>
</div>
//jsファイルへの記述
$(function(){
	$("ul.z48 img[src='84.gif']").mouseover(function(){
	$(this).attr("src","88.gif");
	}).mouseout(function(){
	$(this).attr("src","84.gif");
	});

	$("ul.z48 img[src='83.gif']").mouseover(function(){
	$(this).attr("src","87.gif");
	}).mouseout(function(){
	$(this).attr("src","83.gif");
	});

	$("ul.z48 img[src='85.gif']").mouseover(function(){
	$(this).attr("src","89.gif");
	}).mouseout(function(){
	$(this).attr("src","85.gif");
	});

});

正規表現を使えば、簡略化できるけど、切り替え画像の方に、12_on.gifのような一部が共通の名前を付けなければならないというのがある。

each(function(){})を使って、ブラウザにプリロードさせる方法もあるが、メンドイので省略。

2012年1月26日10:32 PM | カテゴリー: HTML4,5 | コメント(0)

コメントを残す

メールアドレスが公開されることはありません。