jQuery | Almondlab

jQueryでイメージのロールオーバーの設定。

2010.02.27 / Notes

jQueryを使ってナビゲーションボタンなどによく使われている、画像のロールオーバー、ロールアウトを設定する方法です。
予め通常時、ロールオーバー時の画像データ2種類を用意します。ファイル名は通常時が「button.png」の場合、ロールオーバー時は「button-over.png」と「-over」を付加しておきます。ともに同じディレクトリに保存します。
HTMLに通常時の画像を配置し、クラスを「over」としておきます。

<img src="button.png" alt="ボタン" class="over" />

1	<img src="button.png" alt="ボタン" class="over" />

次のjQueryを含むJavasScriptを、Head内、外部ファイルなど任意の場所に記述します。

$(function(){
	imageOver();
})

//イメージのロールオーバー設定
function imageOver() {

	//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行
	$("img.over").each(function() {
		
		//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成
		var image = this.src;
		var extension = image.substr(image.lastIndexOf("."), image.length-1);
		var image_over = image.replace(extension, "-over"+extension);
		
		//ロールオーバー用イメージを読み込み
		new Image().src = image_over;
		
		//ロールオーバー、ロールアウト時のイメージURL設定
		$(this).hover(
			function(){this.src = image_over},
			function(){this.src = image}
		);
	});
}

$(function(){

imageOver();

})

//イメージのロールオーバー設定

function imageOver() {

//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行

$("img.over").each(function() {

//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成

var image = this.src;

var extension = image.substr(image.lastIndexOf("."), image.length-1);

var image_over = image.replace(extension, "-over"+extension);

//ロールオーバー用イメージを読み込み

new Image().src = image_over;

//ロールオーバー、ロールアウト時のイメージURL設定

$(this).hover(

function(){this.src = image_over},

function(){this.src = image}

);

});

}

上記のスクリプトでは、HTMLページ内に配置してある「over」クラスを持つイメージ全てに対して、ロールオーバー時に「-over」を付加した画像ファイルに置き換える設定にしてあります。ロールアウトで元の画像に戻します。
スクリプト内でロールオーバー用画像を読み込んでおくことにより、ロールオーバー時に画像の読み込みのため一瞬、間が空くことを防いでいます。

jQueryのプラグインでCookieを扱う方法。

2010.02.11 / Notes

jQueryのプラグインを使うと、ブラウザのクッキーを簡単に扱えます。
実装するにはjQueryのコアと、「jquery.cookie.js」プラグインを読み込ませてから、「$.cookie」メソッドでクッキーの読み込み、書き込みの操作ができるようになります。
次のコードでは読み込み、書き込みごとに関数にして、「cookie-test」というクッキー名の値を操作しています。
クッキーの有効期限は「expires」の引数で、日にちを指定できます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

<script type="text/javascript">

//クッキーの読み込み
function getCookie() {
	return $.cookie("cookie-test");
}

//クッキーの書き込み
function setCookie(str) {
	$.cookie("cookie-test", str, {expires:3}); //有効期限を3日
}
</script>

//クッキーの読み込み

function getCookie() {

return $.cookie("cookie-test");

}

//クッキーの書き込み

function setCookie(str) {

$.cookie("cookie-test", str, {expires:3}); //有効期限を3日

}

</script>

jquery.cookie.jsプラグインページ

jQueryのプラグインでFLASHの埋め込み。

2010.01.05 / Notes

jQueryのプラグインを利用して、HTMLにFLASHを簡単に埋め込む方法です。短いコードで記述できるので、ソースコードがすっきりとして見やすくなります。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery FLASH</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>
</head>
<body>

<div id="flash">
<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>
</div><!-- flash -->

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery FLASH</title>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

</head>

<body>

<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>

</div>

</body>

</html>

<head>タグ内にjQuery本体とjquery.flash.jsを読み込んで、div#flashに対して埋め込みの記述をします。
最低限必要なのはSWFファイルのパスのみで、width、heightは省略できます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

FLASHにパラメータを渡す場合は、次のようにflashvarsをオブジェクトで追加します。

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

1	$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

jquery.flash.jsプラグインページ