ボタンをクリックすると画面上端から画像が登場し画面中央まで降りてきます。ここで使っているレイヤーの機能はNN4/IE4から使えます。
応用 :
画像を取り替えたり出現場所移動位置を変えたりしてみましょう。この画像を<a href=...>と</a>で囲んでリンクボタンにすることも出来ます。
参照 : オブジェクトの有無を調べる if(document.images){命令}, layers[], visibility, onClick,
参考 : クロスブラウザDHTMLのサンプルページ(回線をつないでください)
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//移動用関数
function moveByLAYER(layName,offsetx,offsety){
if(document.getElementById){ //NN6,IE5用
var oj = document.getElementById(layName).style
oj.left = parseInt(oj.left)+offsetx
oj.top = parseInt(oj.top)+offsety
}
else if(document.layers)
document.layers[layName].moveBy(offsetx,offsety) //NN4用
else if(document.all){ //IE4用
var oj = document.all(layName).style
oj.pixelLeft+=offsetx
oj.pixelTop+=offsety
}
}
//x座標を取得する
function getTOP(layName){
if(document.getElementById)
return parseInt(document.getElementById(layName).style.top) //NN6,IE5用
else if(document.layers)
return document.layers[layName].top //NN4用
else if(document.all)
return document.all(layName).style.pixelTop //IE4用
}
//1/1000秒ごとにmov()を実行する
function movrl(){
IntID = setInterval('mov()',1)
}
//水直方向右へ10pxずつ動かし、yが終了位置を超えたらたらストップ
function mov(){
if( 350 < getTOP('imgA') )clearInterval(IntID)
else moveByLAYER('imgA',0,10)
}
//-->
</script>
</head>
</body>
<div id="imgA"
style="position : absolute ;
left : 220px ;
top : -150px ;">
<img src="BOTAN.GIF" width=120 height=90>
</div>
<form>
<input type="button" value=" ぼたんのボタン " onClick="movrl()">
</form>
</body>
</html>
<div>タグの中のスタイルtop : -150px は画面上端からさらに上へ150pxの場所、つまり画面上には見えない場所へこのDIVタグを置きます関数moveByLAYER('レイヤ−名',x方向ピクセル数,y方向ピクセル数) はposition指定されたレイヤーの現在位置を起点として指定したピクセル分だけ位置を移動させるためのファンクションです。NNでは専用のメソッドmoveBy(x方向px,y方向px)を使い、IEではx,y方向へ移動させるプロパティpixelLeftとpixelTopへ+=を使ってx方向pxとy方向pxをピクセル(整数)で代入しています。たとえばpixelLeft=10ならブラウザ画面左端から10ピクセルの位置へ移動しますが、pixelLeft+=10だと現在のレイヤー位置に10足す、つまり右方向へ10ピクセルの位置へ移動するという意味になります。 IEではposLeft,posTop(実数)も使えますposition : absoluteを指定した場合 left:200px ならページの左端から200ピクセル離し、top:350pxならページの上端からの350ピクセル数の場所へ表示されます関数getLEFT('レイヤ−名')はブラウザ左端からのレイヤ−左辺位置をピクセルで取得するためのファンクションです。NNではleft、IEではpixelLeftを使っています
IntID=setInterval('mov()',1)で1/1000毎にmov()を実行します。setTimeoutに似ていますがsetTimeoutは指定時間後に１度だけ実行するもので、setIntervalは自動的に繰り返すという違いがあります。clearInterval(IntID)でタイマーを中止します
C01とC02の説明も参照してください
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)