マウスを重ねたり、離したりすると画像が入れ替わる処理をするにはEvent HamdlerのonMouseoverとonMouseoutを使います。
◇HTML <img src="画像ファイル onMouseover="JavaScriptコード" name="画像の名前">
◇JavaScriptコード document.画像オブジェクト.プロパティ；
サンプル・プログラム
<img src="card_back.gif" onMouseover="card.src='card_face.gif'"
onMouseout="card.src='card_back.gif'" name="card"/>
// 上のcardはimageオブジェクトの名前で、この場合自身を指すのでthisとしても良い。
上のサンプル・プログラムを実行すると、サンプル・プログラム０４−０１のようになります。
画像のサイズを変更するには、「width」（横幅）と「height」（縦幅）プロパティを操作します。HTMLの場合は次のようになります。
変数の定義方法は次のように書きます。
☆ HTML <img src="画像ファイル onMouseover="JavaScriptコード"
name="画像の名前">
☆ JavaScriptコード document.画像オブジェクト.width＝横幅の数字；
document.画像オブジェクト.height＝高さの数字；
上のサンプル・プログラムを実行すると、サンプル・プログラム０４−０２のようになります。
画像を動かすにはスタイルシートと連動してJavaScriptののプログラムを書きます。
☆ スタイルシートで画像の位置を設定する方法：
<img src="画像のファイル" name="画像の名前" style="position:absolute;left:X座標;top:Y座標;">
☆ JavaScriptでスタイルシートを制御する方法：
document.画像オブジェクト.style.left=X座標
document.画像オブジェクト.style.top=Y座標
☆ 座標を変更して画像を動かす方法：
setInterval('関数名()','インターバルのミリ秒')
この種のサンプル・プログラムはサンプル・プログラム０４−０３のようになります。。
テキストを動かすにはＣＳＳのＤＯＭの"Get Element By ID"を使います。
テキストのスタイル要素を制御するにはDOM（Document Object Model）はHTMLやXMLで記述された各要素を取り扱うための標準インタフェースとして1998年にW3Cによって勧告されました。IE始め殆どのブラウザでDOMをサポートするようになりました。
DOMに就いては次章でiQueryと関連してもう少し詳しく勉強することになります。
☆ スタイルシートでテキストの座標を設定する方法：
<div id="テキストの名前" style="position:absolute;left:X座標;top:Y座標;">
テキスト・・・・・・
</div>
☆ JavaScriptでスタイルシートを制御する方法
document.getElementById("テキストの名前").style.left=X座標
document.getElementById("テキストの名前").style.top=Y座標
サンプル プログラムは： サンプル・プログラム０４−０４をご覧ください。
| サイトのトップへ | JavaScriptの目次へ | 第１章へ戻る | 第5章へ進む |