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で擬似ロールオーバーを試してみてはいかがでしょうか。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。