The current article
超簡単！CSSを使わず、jqueryで画像透過（ロールオーバー）する
わずか数行のコードで、画像を透過するjqueryのご紹介です。
今更感もありますが、ロールオーバーさせる為に画像を2枚用意するのが面倒な時の選択肢の一つにいかがでしょうか。
capture
まず、いつもの様にjquery本体を読み込みます。
続いて透過用のコードを書いていきます。
記述例はこんな感じです。
<html>
<head>
・
・
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var images = $("img");
for(var i=0; i < images.size(); i++) {
if(images.eq(i).attr("src").match("_btn.")) {
$("img").eq(i).hover(function() {
$(this).css('opacity', '0.7');
}, function() {
$(this).css('opacity', '1');
});
}
}
});
</script>
・
・
</head>
・
・
簡単な解説ですが、
10行目が、画像の名前に「_btn」と記述されているものとマッチした場合、
11行目が、その画像にマウスが乗った時、
12行目が、70％に透過する。（0.8にすると80%のように変更できます）
14行目が、マウスが乗っていない時は100%で表示。
となります。
続いてBODY内の記述はこんな感じになります。
・ ・ <a href="hoge.html"><img src="images/sample_btn.jpg" /></a> ・ ・
画像には「_btn」を付けてあげないと動きませんので、
例えば、画像ファイル名を「sample_btn.jpg」としてアップロードし、
画像へのリンクも「sample_btn.jpg」と、「_btn」を付けて下さい。
参考にCSSで対応するとこんな感じでしょうか。
a:hover img {
filter: alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity:0.7;
zoom:1;
}
一度、jquweryで擬似ロールオーバーを試してみてはいかがでしょうか。
関連記事
