【楽天】マウスオーバー時に画像をフワッと半透明にするスクリプト

公開日：2013/10/14 最終更新日：2018/06/16

こんばんはハカセです。ここのところなかなか忙しい毎日を送っていますが、たまにはブログ更新してみます。

楽天でショップをやっていると、夥しい数のバナーを作ると思いますが、バナーで大切なのはクリックしてもらう事です。

クリックしてもらって、その先にあるページにアクセスしてもらって、初めてバナーは意味を持ちます。

クリックしたくなる様な、その先に何があるのか見たくなる様な、そんなバナーが作れたら一番ですが、こればっかりは中々奥が深くて難しいです。

バナーにマウスを合わせた時「ここにはリンク貼ってあるよ！」って主張が出来たら、もっとバナーはクリックしてもらえるのでは？

そんな訳で本日はバナーにマウスが乗ったらフワッと半透明になるスクリプトをご紹介します。

例によってjQueryを使用していますので、こちらもご参考に。

コピペでOK！楽天のページにjQueryで動くバナーを設置する方法

まずは参考サイト

簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ NxWorld [browser-shot width=”240″ url=”http://www.nxworld.net/”]

正直言ってある程度出来る人はこのサイト見てもらった方がわかりやすくて早いです・・・。

簡易バージョン「CSSだけ」（参考記事の2番です）

マウスを乗せると半透明になります。IEでも一応半透明にはなりますが、IE9までだと「フワッ」とならないのが弱点ですが、JavaScript（jQuery）を使用していないので、RMSの商品ページやカテゴリページにも使用出来ます。

CSS

	a img {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

これで充分な気もしますが、余計なこだわりを発揮するのがクリエイターの良い（悪い）ところ。次はIEでもフワッとなるバージョンです。

jQueryバージョン（参考記事の8番です）

jQueryを使用しているのでライブラリファイルをGOLDにアップして、使用するページで読み込む必要があります。

HTML


<script src="jQueryファイルのURL.js"></script>

<script>
$(function(){
	$('a img').hover(
		function(){
			$(this).fadeTo(200, 0.6);
		},
		function(){
			$(this).fadeTo(200, 1.0);
		}
	);
});
</script>

jQueryを使用しているので、当然の事ながらGOLDのページでしか使用出来ません・・・。なのでCSSバージョンとの併用が現実的なところでしょうか。