2007-09-04

画像を表示前に先に読み込む

JavaScript

例えばマウスオーバーさせたときにJavaScriptで画像を入れ替える場合は

<img src="sample1.jpg" onMouseOver="this.src='sample2.jpg'">

とかすればいいわけだけど、「sample2.jpg」はマウスオーバーした時に読み込まれるから、パッと画像が切り替わらないかもしれないね。

という時にやっておきたいのが画像の先読みというやつで、まだ出てきてない画像も先に読み込ましてやれば、マウスオーバーした時もすぐに画像が切り替わるという優れもの。

やり方は上の例の場合だと、スクリプト書くとこに

sakiyomi = new Image(); //画像オブジェクトを生成
sakiyomi.src = "sample2.jpg"; //画像ファイルを指定

とすれば良いだけで簡単でした。

僕はCSSでやっちゃうので、これはあまりやることないかもしれないね。

2007-09-03

画像のサイズ

JavaScript

画像のサイズを変えるには

document.images["画像の名前"].width = 画像の幅;
document.images["画像の名前"].height = 画像の高さ;

という指定をしてやる。

例えば、画像をクリックするたびに10ピクセルづつ大きくなるような、使用用途がなさそうなものを作るとすると

<html>
<head>
<title>画像サイズをクリックで大きく</title>

<script type="text/javascript">
<!--

imageW = 200; //画像の幅の初期値
imageH = 100; //画像の高さの初期値

function kakudai() {
	imageW = imageW + 10;
	imageH = imageH + 10;
	document.images["sample"].width = imageW;
	document.images["sample"].height = imageH;
}

// -->
</script>

</head>

<body>

<p><img src="sample.jpg" id="sample" onClick="kakudai()"></p>

</body>
</html>

こんなかんじかな。

2007-09-02

キーイベント

JavaScript

って確かまだやってなかったかな。
一応検索かけて出なかったので、まだだったと思います。

キーイベントって

onKeydown : キーが押された
onKeypress : キーが押されたまま
onKeyup : キーが離された

とかあたり。

例えばbodyに

<body onKeydown="alert('何かキーを押したね')">

としてやれば、キーボードのボタンを何か押すたびに「何かキーを押したね」と出てこの上なくウザいものができますね。

もうちょっと使えるのが欲しいね。
eventオブジェクトのkeyCodeプロパティを使えば、どのキーが押されたのかをキー番号で教えてくれるらしくて、これは用途がありそうです。

<body onKeydown="alert(event.keyCode+'のキーを押したね')">

としてやれば、例えばAを押した時は「65のキーを押したね」と表示される。
これはAのボタンに65というキーコードが当てられているからだけど、これではちょっと分かりにくい。
そこで、これをちゃんとAとして返してくれるのがString.fromCharCodeというもの。

<body onKeydown="alert(String.fromCharCode(event.keyCode)+'のキーを押したね')">

これでAを押したら「Aのキーを押したね」と表示される。
あーでもアルファベットと数字以外はちゃんと返してくれないみたい。

その他、特殊なキーとして

event.ctrlKey : Ctrlキーが押されたかをtrue、falseで返す
event.shiftKey : Shiftキーが押されたかをtrue、falseで返す
event.altKey : Altキーが押されたかをtrue、falseで返す

などもある。
というか他にもいっぱいあって、event.keyCodeはonKeydownやonKeypressと得られる値が違ったりしていたり、何かと複雑みたい。
使う時に調べたほうがよいね。

2007-09-01

ブラウザとかの判別

JavaScript

2冊目になると、1冊目で覚えたものは書くこともないなぁと思っていたのですが、ブラウザを判別するというものがあり、これは前になかったのでメモしておこうかと思います。

というのも、1冊目のマウスイベントの時とかはIEで動いたけど、Firefoxでは動かなかったということもあるので、これは後々ブラウザの振り分けが必要だろうと思ったわけです。

このブラウザの判別はnavigatorオブジェクトというものを使うようです。
例えば、ブラウザの名前を出す場合は

navigator.appName

で簡単に出せます。
ただしFirefoxだと「Netscape」と出てしまいますね。
同じ系列のブラウザだからこれはしょうがないのかもしれません。

このnavigatorオブジェクトは

appCodeName : コード名
appName : ブラウザ名
appVersion : ブラウザのバージョン
userAgent : 色々情報の詰め合わせ

などがあります。

今まで覚えたことだけで簡易的なブラウザ判別をするとなると

function hanbetsu() {
	if (navigator.appName=="Netscape") {
		alert("Netscapeだね！");
	} else if (navigator.appName=="Microsoft Internet Explorer") {
		alert("IEだね！");
	} else {
		alert("その他だね！");
	}
}

という感じで、一応いけた。
動作するので、合ってることは合ってるようです。

2007-08-31

マウスイベントで適当に遊ぶ

JavaScript

リンクテキストにマウスを重ねたときにテキストカラーを変えるのはCSSでよくやるもので、このサイトでも「濃い目のレッド→ピンク」に変わるようにしています。

これはCSSで

a {
	color: #c03;
}

a:hover {
	color: #f06;
}

というように :hover を後に付けて指定してやれば簡単にできます。

この :hover は、僕の使っているFirefox(2.0.0.6)だとdivボックスにも使えます。

div {
	color: #ccc;
}

div:hover {
	color: #ddd;
}

とすると、Firefoxだとdivボックスにマウスを重ねたときに色が変わります。
でも、IEは未対応のようで、最新のIE7でもダメなようです。
多くの人に見てもらいたいような演出の場合、これは使えません。

でもこれ、JavaScriptで作ってやるとIEにも対応できますね。
にわか仕込みのJavaScriptで申し訳ないのですが、勉強ということで、自分で考えて書いてみました。

<html>
<head>
<title>divボックスにマウスを重ねて色変更</title>

<script type="text/javascript">

function over() {
	box.style.background="#ddd";
}

function out() {
	box.style.background="#ccc";
}

</script>

</head>

<body>

<div id="box" style="background:#ccc;width:300px;height:300px;" onMouseOver="over()" onMouseOut="out()">
ここにマウスを乗せると色が変わるよ！
</div>

</body>
</html>

一応できた。
divボックスに onMouseOver と onMouseOut のマウスイベントを仕込んだだけだけど。
というかこれ、別にfunctionとかしなくても

<html>
<head>
<title>divボックスにマウスを重ねて色変更</title>
</head>

<body>

<div id="box" style="background:#ccc;width:300px;height:300px;" onMouseOver="this.style.background='#ddd'" onMouseOut="this.style.background='#ccc'">
ここにマウスを乗せると色が変わるよ！
</div>

</body>
</html>

というかんじで、divボックス内に全部おさめることもできるんだね。
たぶん、全部外部に書くこともできるのかもしれないけど、今はわかりませんね。