リンク画像のマウスオーバーで半透明化！

画像を配置し、その画像をクリックすることで別ページにリンクするような場合、画像の上にマウスを合わせますが、その際にリンクがかかっていることを知らせるために画像を半透明にする場合があります。その際の設定方法です。

いろいろ方法はあると思いますが、３つ紹介します。

　（１）　CSS（スタイルタグ）、HTMLで定義する
　（２）　HTMLタグだけで定義する
　（３）　jQuery（Javascript)、HTMLで定義する

（１）CSSだけでマウスホバー時の画像を半透明にする。
　

下の画像に、マウスを乗せてみてください。

①スタイルタグで、リンク画像にマウスを乗せると、画像を半透明にする。
　下記のスタイルタグをページのHEAD部分に追加する。

<style>
a img.mouselink{
background:none!important;
}
 
a:hover img.mouselink{
opacity:0.4;
filter:alpha(opacity=40);
-ms-filter: "alpha( opacity=40 )";
background:none!important;
}
</style>
</head>

※　opacity:0.4、opacity=40は透明度40％を意味します。
　　必要に応じて変更してください。
※　「mouselink」はクラス名です。
　
　
②表示したい画像の位置に下記のタグを挿入する。

<a href="#"><img src="画像絶対パス" class="mouselink" /></a>

　
　
（２）HTMLタグで、リンク画像にマウスを乗せると、画像を半透明にする。

　左の画像にマウスを乗せると、半透明画像を表示する。
　

　左の画像にマウスを乗せると、まったく違う画像を表示する。
　

　
下記のようなHTMLタグで指定します。

<a href="#"><img src="画像絶対パス１" width="200" 
onMouseOver="this.src='画像絶対パス２'" 
onMouseOut="this.src='画像絶対パス１'"></a>

※「画像絶対パス２」は「画像絶対パス１」の半透明画像を準備します。
※マウスを画像に合わせて、全く別の画像を表示する場合等に便利です。
　
　
　
（３）jQuery (javascript)とHTMLで定義し、リンク画像にマウスを乗せると、画像を半透明にする。
　
先ずは、下記のスクリプトを内に設置します（テンプレート設定）。数値は好みで設定してください。ここでは、「一瞬で半透明にする」方法と「ゆっくり半透明にする」方法が設定可能です。

<script type="text/javascript" src="http://ajax.googleapis.
com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!---上記jquery.min.jsを、既に他のプラグインなどで定義
していれば不要です--->

<script type="text/javascript">
<!--
$(function() {
	// Fade Slow　ゆっくり半透明
	var nav = $('.mouselink_s');
	nav.hover(
		function(){
			$(this).fadeTo(500,0.5);
		},
		function () {
			$(this).fadeTo(500,1);
		}
	);
	// Fade First　瞬時に半透明
	var nav = $('.mouselink_f');
	nav.hover(
		function(){
			$(this).fadeTo(0,0.4);
		},
		function () {
			$(this).fadeTo(0,1);
		}
	);
});
// -->
</script>
</head>

※　fadeTo(時間、透明度）　　
　　　時間：「ミリ秒」1000＝１秒　透明度：0（透明）～1（不透明）
※　「mouselink_s」「mouselink_f」はクラス名です。
　
　
①ゆっくり画像を半透明にさせる場合は「class=”mouselink_s”」を指定する。

<img src="画像絶対パス" alt="画像代替テキスト" 
class="mouselink_s" />

　
　
②一瞬で画像を透過させる場合は「class=”mouselink_f”」を指定する。

<img src="画像絶対パス" alt="画像代替テキスト" 
class="mouselink_f" />

　
　
私の経験から(1)のスタイルタグを使用したもの場合が、一番反応が良いように思います。　また、メンテナンスのしやすさでは、(1)のスタイルタグ、（３）のjQueryがいいと思います。
　
以上、メモです。