月別アーカイブ: 2011年1月

jQueryを使った簡単ロールオーバー


on画像を毎回プリロードイメージしたくないことと、
画像が増えるたびにスタイルシートに画像パスが増えるのも、
作った本人以外が更新するのが難しいので避けようと思い、
クラスなどを追加するだけで簡単にロールオーバー画像にできるjsをjQueryベースで作ってみた。

準備するのは以下の2点。

①ON/OFFを上下1枚に配置した画像を用意する。
▼画像例

②aタグにclass=”roll_over”、子要素のimgにheightとwidthを指定する。
▼ソースの記述例
<a href="#" class="roll_over" title="説明説明説明"><img src="hoge.gif" width="150" height="40" alt="" /></a>

▼デモページ
http://www.kuzumi.net/sample/roll_over/

▼css

<style type="text/css">
img{
	border:0;
}
a.roll_over{
	display:block;
	height:100px;
	overflow:hidden;
}
</style>

▼JavaScript

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
var rollover_class_name = 'roll_over';
$("a." + rollover_class_name).css("display","block");
$("a." + rollover_class_name).each(function(){
$(this)
.css("display","block")
.css("width",$(this).find("img").attr("width") + "px")
.css("height",$(this).find("img").attr("height") / 2 + "px")
.css("background","url(" + $(this).find("img").attr("src") + ") no-repeat 0 0");
});
$("a." + rollover_class_name + " img").css("display","none");
$("a." + rollover_class_name).hover( // onmouseover
function(){
$(this).css("background-position","0 -" + $(this).find("img").attr("height") / 2 + "px");
},
function(){ // onmouseout
$(this).css("background-position","0 0");
}
);
});
</script>

▼html

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
ここにJavaScriptが入ります
</script>
<style type="text/css">
ここにCSSが入ります
</style>
</head>
<body>
<a href="#" class="roll_over"><img src="roll_over.gif" width="200" height="200" alt="" /></a>
</body>
</html>

▼jQueryダウンロード
http://jquery.com/

2011/1/19追記
ソースにバグがあり少し手直しをしました。。
また、JSオフのときのことを考えると、
上記サンプルのようにスタイルでも高さを指定しておいたほうがよいかもしれません。
CSSで高さを指定した場合で、複数のボタンサイズがある場合は、
サイズごとにクラスを追加して、高さを指定するしかなさそうです。

そもそも、このロールオーバーは、画像パスをCSSファイルにすべて記述しなくてもよくなることと、
プリロードイメージを読み込まなくてもすむようにすることが目的ですから、その点において全く問題ありません。
特殊サイズのロールオーバーボタンは、最悪、style属性への直書きでheightを指定するというのもありかもしれません。。

テキスト違いの同サイズボタンを大量に扱う場合、
aタグへのクラスの追加、imgへのhref、height、width属性の記述、cssでJSオフ時の高さ対策だけ施せば、
いくらでも追加できるというのは便利だと思います。