フォームのボタンはCSSである程度デザインをかえれるけど、いまいちなので「type=image」をよく使うけど、デフォルトのボタンのようなクリック感がなくなっていまいます。

ということで、クリック感をだすついでにロールオーバーでも画像を入れ替えるものを作ってみました。

jQuery – フォームの画像ボタンをロールオーバーする

JavaScript

<script language="JavaScript">
//画像をプリロード
function preload(Dir, imgs){
	var d = document;
	for(var i = 0; i< imgs.length; i++){
		var imgObj = new Image();
		imgObj.src = Dir+imgs&#91;i&#93;;
			alert(imgObj.src);
	}
}
window.onload = function(){ preload("./", &#91;"d_down.gif","d_over.gif"&#93;) }

$(function (){
	//マウスが乗ったら…
	$('form :image').mouseover(function() {
		//up画像
		var upimgSrc = $(this).attr("src");
		//over画像
		var overimgSrc = upimgSrc.replace("up", "over");
		//down画像
		var downimgSrc = upimgSrc.replace("up", "down");
		//over画像に入れ替え
		$(this).attr("src", overimgSrc);
		//念のためアップ画像をバックグラウンドに設定
		$(this).css("background-image", "url("+upimgSrc+")");
		//マウスが押されたら…
		$(this).mousedown(function() {
			//down画像に入れ替え
			$(this).attr("src", downimgSrc);
			//マウスアップしたら…
			$(this).mouseup(function() {
				//up画像に入れ替え
				$(this).attr("src", upimgSrc);
			});
		});
		//マウスが外れたら…
		$(this).mouseout(function() {
			$(this).attr("src", upimgSrc);
		});
	});
});
</script>

ボタンに使う画像は「○○○_up.gif」「○○○_over.gif」「○○○_down.gif」と「○○○」部分を同じにしておきます。HTML側では「type=image」で「○○○_up.gif」を指定します。

<input type="image" alt="ボタン" width="206" height="106" src="./d_up.gif" />

ポイントはボタンに使う画像をプリロードしておくこと。プリロードしておくことでアクションが起こってから読み込むタイムラグをなくします。

あとはクリックしたときの点線を消したいけど、IEでは無理みたいなので仕方がない。一応サンプルではCSSで「outline: none;」を指定しているのでFirefoxでは点線はでません。

まあ点線が出た方がクリックした安心感はでるので、ここはよしとしておきましょう。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

MySQLを確認したついでにPHPでの可逆暗号化も調べました。

Mcrypt暗号化関数で行うようで、いろいろ試して、いざ本番サーバで動かすと「Call to undefined function mcrypt_get_iv_size() 〜」と、エラーが…。PHPINFOで確認したらMcryptが使えない模様…。

ということで別の方法を探したらPEAR :: Crypt_Blowfishであれば、Mcryptが使えなくても利用できるようなので、さっそく試したところ動作しました。

require_once ("Crypt/Blowfish.php");

$key = "keyword";
$data = "encodewords";
//暗号化
$blowfish = new Crypt_Blowfish($key);
$encode_data = $blowfish->encrypt($data);
//暗号化したデータはバイナリなのでbase64_encodeでテキスト化
echo base64_encode($encode_data);

//復号化
$blowfish = new Crypt_Blowfish($key);
$decode_data = $blowfish->decrypt($data);
//rtrimで「\0」を取り除く
echo  rtrim($decode_data, "\0");

注意点は暗号化したデータを表示させるときは「base64_encode」を通す、復号化したときはお尻に「\0（ヌル文字）」がついている場合があるので取り除く、こと。

暗号化についてはもうちょっと理解できてない部分があるけど、ひとまずはここまで。

PHP: Mcrypt – Manual
PEAR :: Package :: Crypt_Blowfish
2007-11-08 – Do You PHP はてな「PHPで暗号化・復号あれこれ」の続き

MySQLで可逆暗号化するときのメモ。

「AES_ENCRYPT(str,key_str), AES_DECRYPT(crypt_str,key_str)」BLOB型を使用する。

//暗号化
INSERT INTO table (a) VALUES (AES_ENCRYPT('value','password'));
//複号化
SELECT AES_DECRYPT(a,'password') as dec_a from table;

「ENCODE(str,pass_str), DECODE(crypt_str,pass_str)」BLOB型を使用する。

//暗号化
INSERT INTO table (a) VALUES (ENCODE('value','password'));
//複号化
SELECT DECODE(a,'password') as dec_a from table;

MySQL AB :: MySQL 5.1 リファレンスマニュアル :: 11.10.2 暗号化関数と圧縮関数

MySQLの本はなんか自分にあったものがなかなかない。「MySQL全機能リファレンス」がお気に入りなのだが、新しいのでないかな？

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。