フォノクラフト株式会社：作業メモや備忘録など » jQuery http://121.50.42.205/note 作業メモや備忘録など... Fri, 05 Jul 2013 05:17:27 +0000 ja hourly 1 http://wordpress.org/?v=3.1.3 [JS] 簡単にオンマウスで画像を半透明化 http://121.50.42.205/note/js-%e7%b0%a1%e5%8d%98%e3%81%ab%e3%82%aa%e3%83%b3%e3%83%9e%e3%82%a6%e3%82%b9%e3%81%a7%e7%94%bb%e5%83%8f%e3%82%92%e5%8d%8a%e9%80%8f%e6%98%8e%e5%8c%96_801 http://121.50.42.205/note/js-%e7%b0%a1%e5%8d%98%e3%81%ab%e3%82%aa%e3%83%b3%e3%83%9e%e3%82%a6%e3%82%b9%e3%81%a7%e7%94%bb%e5%83%8f%e3%82%92%e5%8d%8a%e9%80%8f%e6%98%8e%e5%8c%96_801#comments Wed, 23 Nov 2011 07:16:06 +0000 admin http://phono.co.jp/note/?p=801 使い勝手がすばらしい

以前にも同じ様な投稿をしてますが、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" />
]]> http://121.50.42.205/note/js-%e7%b0%a1%e5%8d%98%e3%81%ab%e3%82%aa%e3%83%b3%e3%83%9e%e3%82%a6%e3%82%b9%e3%81%a7%e7%94%bb%e5%83%8f%e3%82%92%e5%8d%8a%e9%80%8f%e6%98%8e%e5%8c%96_801/feed 0 [JS] jQueryを使用して画像のロールーバー（オンマウスでの画像切り替え） http://121.50.42.205/note/js-jquery%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e7%94%bb%e5%83%8f%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%ab%e3%83%bc%e3%83%90%e3%83%bc%ef%bc%88%e3%82%aa%e3%83%b3%e3%83%9e%e3%82%a6%e3%82%b9%e3%81%a7_523 http://121.50.42.205/note/js-jquery%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e7%94%bb%e5%83%8f%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%ab%e3%83%bc%e3%83%90%e3%83%bc%ef%bc%88%e3%82%aa%e3%83%b3%e3%83%9e%e3%82%a6%e3%82%b9%e3%81%a7_523#comments Sun, 04 Sep 2011 06:03:03 +0000 admin http://phono.co.jp/note/?p=523

jQueryを使用して画像のロールーバー（オンマウスでの画像切り替え）をします。
IE各バージョンにも対応しているので安心して使えます。

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

JSのソース

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

jQuery.noConflict();

jQuery(function(){
				
	// RollOver 01
	jQuery(".fadeimg").hover(
	  function(){
	    jQuery(this).fadeTo(0,0.8);
	  },
	  function(){
	    jQuery(this).fadeTo(500,1);
	  }
	);
	// RollOver 02
	jQuery(".fadeimg_top_navi").hover(
	  function(){
	    jQuery(this).fadeTo(0,0.5);
	  },
	  function(){
	    jQuery(this).fadeTo(500,1);
	  }
	);
		
	// RollOver 03
	jQuery(".swapimg").hover(
	  function(){
		//jQuery(this).attr('src', String(jQuery(this).attr('src')).split('_on.jpg')[0] + ".jpg");
	    //jQuery(this).attr('src', String(jQuery(this).attr('src')).split('.jpg')[0] + "_on.jpg");
		jQuery(this).fadeTo(200, 0);
	  },
	  function(){
	   // jQuery(this).attr('src', String(jQuery(this).attr('src')).split('_on.jpg')[0] + ".jpg");
	   jQuery(this).fadeTo(300, 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/img_link_filter.js"></script>

↓完全に画像を切り替える場合は「class=”swapimg”」

<div class="banner-T">
<p style="background-image:url(./common/img/top/ban_top_01_on.jpg);"><a href="####"><img src="./common/img/top/ban_top_01.jpg" alt="○○○○" class="swapimg" /></a></p>
<p style="background-image:url(./common/img/top/ban_top_02_on.jpg);"><a href="####"><img src="./common/img/top/ban_top_02.jpg" alt="○○○○" class="swapimg" /></a></p>
</div>

↓画像に透過させる場合は「class=”fadeimg”」

<div class="banner-T">
<a href="####"><img src="./common/img/top/ban_top_03.jpg" alt="○○○○" class="fadeimg" /></a>
</div>
]]> http://121.50.42.205/note/js-jquery%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e7%94%bb%e5%83%8f%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%ab%e3%83%bc%e3%83%90%e3%83%bc%ef%bc%88%e3%82%aa%e3%83%b3%e3%83%9e%e3%82%a6%e3%82%b9%e3%81%a7_523/feed 0