フォノクラフト株式会社:作業メモや備忘録など

作業メモや備忘録など…

[JS] 簡単にオンマウスで画像を半透明化

without comments

使い勝手がすばらしい

以前にも同じ様な投稿をしてますが、jQueryを使用してロールーバーで画像の半透明にします。

※jQuery は http://scriptsrc.net/ からコピーすると便利です。

JSのソース

ファイル名は任意で構いませんが、仮に「rollover.js」とします。

$(function() {
	// Fade Slow
	var nav = $('.imgover_s');
	nav.hover(
		function(){
			$(this).fadeTo(300,0.5);
		},
		function () {
			$(this).fadeTo(300,1);
		}
	);
	// Fade First
	var nav = $('.imgover_f');
	nav.hover(
		function(){
			$(this).fadeTo(0,0.7);
		},
		function () {
			$(this).fadeTo(0,1);
		}
	);
});

使い方

↓<head>内に記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="./common/js/rollover.js"></script>

↓ゆっくり画像を半透明にさせる場合は「class=”imgover_s”」

<img src="./common/img/top_ban_01.gif" alt="bell" class="imgover_s" />

↓一瞬で画像を透過させる場合は「class=”imgover_f”」

<img src="./common/img/top_ban_01.gif" alt="bell" class="imgover_f" />