ウェブ、ショウジン

jQueryを使った透過PNG画像によるロールオーバー(IE6対応)

2011-3-5
Category
jQuery

仕事、プライベートを問わず、これまではCSSの背景画像を使ってやっていたロールオーバー効果を、jQueryを使ったimgタグによるものに最近は変えているのでそのメモ。

透過PNG画像を使ったものだからといってとくに何かする必要はないけれど、IE6は透過PNG画像に対応していない(グレーに表示される)ので、コードにはその処理も追加してIE6対応に。(そのために透明GIFのtransparent.gifも用意)

グローバルナビゲーション部分のロールオーバー効果はいまでもCSSによる背景画像の置換(テキストは表示領域外にとばしてしまう)が一般的かと思うけれど、SEOを考慮した際にalt要素を記述したいことと、やはりhtmlソース内に記述しているテキストを表示領域の外にとばしている(検索ロボットとユーザが見るものが異なる)のが気になるので、グローバルナビゲーション等の主要なものについてはこのやり方(imgタグを使った)にしようと最近は思ってます。

CSSによる背景画像の置換であっても、その画像内のテキストと表示領域外にとばしているテキストの内容が同じであれば問題はない(と、Googleが言っていたような覚えが)はずだけど、前に仕事で前任者の隠しテキストのせいでペナルティをくらって事後処理に苦労した経験があるので、このへんは若干ナーバスになっている今日この頃であったりする。

jQueryを使った透過PNG画像によるロールオーバー(IE6対応)・デモ画面

jQueryを使った透過PNG画像によるロールオーバー(IE6対応)・デモ画面

jQueryを使用するのでjQueryをダウンロードして用意した上で読み込むか、Google Libraries APIのjQueryを読み込む。

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>

IE6でも透過PNGを表示できるようにした処理を加えたjavascriptを用意する。

js/rollover.js

$(function(){
	$("img.rollover").each(function(){
		$("<img>").attr("src", $(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
	});

	if($.browser.msie && $.browser.version<7){
		$("img.rollover").each(function(){
			$(this)
			.data("src", $(this).attr("src"))
			.attr("src", "/demo/img/jquery_ro/transparent.gif")
			.css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src")+"', sizingMethod='scale')");

		}).mouseover(function(){
			$(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")+"', sizingMethod='scale')");
		}).mouseout(function(){
			$(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src")+"', sizingMethod='scale')");
		});

	}else{
		$("img.rollover").mouseover(function(){
			$(this).attr("src", $(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
		}).mouseout(function(){
			$(this).attr("src", $(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
		});
	}
});

上記のjsファイルも読み込むので外部jsファイルの読み込み部分は以下のようになる。

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="./js/rollover.js" type="text/javascript"></script>

背景画像の上に配置したボタン画像を透過PNGにして半透明に重ねるので、このボタンを透過PNGで作成する。

Fireworks(Photoshopは知らない)で新規ドキュメントの「カンバスカラー」を「透明」にして

ピクチャ 1

透明度を調整して半透明のボタン画像を作成。

ピクチャ 2

書き出しで「PNG 32」を選んで書き出す。

ピクチャ 4

この、ロールオーバー時に表示する画像は「btn1_on.png」のようにしてファイル名の後に「_on」をつけておく。通常表示するものは「_on」をつけないで用意しておく。(ロールオーバー処理のために用意したrollover.js内で「_on」をつけたものがロールオーバー時に表示されるようになっている)

IE6を考慮しなければこれで画像の準備は出来ているけれど、このままだとIE6では透過部分がグレーに表示されるので、これを解消するために透過GIF画像(なつかしの1×1ピクセルのtransparent.gif)を用意しておく。この画像を使ってIE6でも透過PNGが表示できるようにrollover.js内にその処理が追加されている。

これで画像と必要なjsファイルが用意できたので、(x)htmlとcssも用意する。(ロールオーバーさせたいボタン画像のimgタグには「class=”rollover”」をつけておくこと)

(x)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="" />
<title>jQueryを使った透過PNG画像によるロールオーバー(IE6対応)・デモ画面</title>
<link rel="stylesheet" href="./css/import.css" type="text/css" media="all" />
<link rel="stylesheet" href="./css/rollover.css" type="text/css" media="all" />
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="./js/rollover.js" type="text/javascript"></script>
</head>
<body>

	<div id="wrapper">

		<ul id="navi_btn" class="cf">
			<li><a href="#"><img src="./img/jquery_ro/btn1.png" width="141" height="53" alt="button1" class="rollover" /></a></li>
			<li><a href="#"><img src="./img/jquery_ro/btn2.png" width="141" height="53" alt="button1" class="rollover" /></a></li>
			<li><a href="#"><img src="./img/jquery_ro/btn3.png" width="141" height="53" alt="button1" class="rollover" /></a></li>
		</ul>

	<!-- // #wrapper --></div>

</body>
</html>

CSS

@charset "utf-8";

/* clearfix */
.cf{ /zoom : 1;}
.cf:after{ content : ''; display : block; clear : both; height:0; }

#wrapper{
	width:600px;
	height:237px;
	background:url(../img/jquery_ro/bg.jpg);
	position:relative;
	overflow:hidden;
}

#navi_btn{
	position:absolute;
	bottom:-1px;
	left:90px;
}

#navi_btn a, #navi_btn img{
	display:block;
}

#navi_btn li{
	width:141px;
	height:53px;
	float:left;
	margin-right:10px;
}

以上。

jQueryを使った透過PNG画像によるロールオーバー(IE6対応)・デモ画面

以下の書籍のお世話になってます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿