目次

スムーズに動かす

画像をあらかじめ取り寄せておく

前回のマウスが乗ったら切り替える仕組みをインターネットで使用すると、反応が遅いことがあります。これはマウスが乗ってはじめて画像データを取り寄せようとするからです。この場合でも一度表示されれば画像データがキャッシュとよばれる一時記憶の場所に記憶されるので2度目からは反応が速くなるのですが、一度目からスムーズに画像の切り替えをするためにはあらかじめブラウザに画像データを取り寄せるようにします。SCRIPTの部分が変わります。(<script type="text/javascript">は省いてあります)

var imgredon = new Image();
imgredon.src = "images/redon.png";
function ageru(){
   document.getElementById("area1").src = imgredon.src;;
}

どこが変わったのか、次の図で比べましょう。

いままでのやりかた

var imgredon = new Image();
imgredon.src = "images/redon.png";
function ageru(){
   document.getElementById("area1").src = "images/redon.png";
}

解説

var imgredon = new Image();

1行目は「 Image() コンストラクタを使って、imgredon というオブジェクトを生成した」と表現します。オブジェクトはデータの集まりに名前を付けたものです。

プログラム言語ではデータに名前を付けて記憶しておき、使用します。1つのデータに一つの名前を付ける場合は変数と呼びます。たとえば、var pai=3.141592 というように pai という変数を作って 3.141592 という数値を入れておき、後で円の面積や円周の長さを計算するときに使うといった具合です。

画像を扱うには画像の横幅や高さをはじめ、さまざまなデータが必要です。このデータの複合体をオブジェクトといい、画像のためのオブジェクトを作るものが Image() コンストラクタであるわけです。

オブジェクトは変数の拡張ですから、頭に変数の生成を宣言する var がついています。var は variable つまり変数(値を変化させることができるもの)の略からつくられたキーワードです。

imgredon.src = "images/redon.png";

2行目では imgredon というオブジェクトの中のデータの一つである画像ファイル名(正確には存在する場所も含むのでURL)を "images/redon.png" と定めています。

オブジェクトに含まれるさまざまなデータの名前をプロパティとよびます。ファイル名は「 src プロパティ」に記憶されます。オブジェクトの個々のデータを格納したり読みとったりするためには、「オブジェクト名.プロパティ名」という形で指定します。

function ageru(){
   document.getElementById("area1").src = imgredon.src;;
}

というわけで、document もオブジェクトだったわけです。これは document オブジェクトの中にある area1 という id をもったオブジェクトの src プロパティを imgredon オブジェクトの src と同じにするという命令であるわけです。


ウェブページ(Sep.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/