レイア内のドキュメント変更２

JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

レイア内のドキュメント変更２
「レイア内のドキュメント変更」の応用編というか、お遊び版です。
案内文があっちこっちからリンク部分まで飛んできます。
リンクの案内以外の使い道の方が使い道としては考えられると思いますので、
どういう風に使うかはそれぞれ考えて下さい。
□ 案内文が収まる位置を１カ所に決める場合

リンク１　リンク２　リンク３　
□ 案内文が収まる位置をそれぞれ変える場合

リンク１

リンク２

リンク３

レイアの数や、レイアの移動開始位置、移動終了位置などを細かく設定することによって
１つのスクリプトで何パターンもの動きが可能です。
■ このスクリプトのソース
<script>
/* 文字の移動スピード */
speed = 15;

var ox;
var oy;
var id;
function move_set(pos,mes,sx,sy,ex,ey) {
 clearTimeout(id);

 if (document.layers) {
 doc = document.layers[pos];
 }
 else if (document.all) doc = document.all.item(pos);
 else if (document.getElementById) doc = document.getElementById(pos);

 if (mes) {
 vis = "visible";
 if (document.layers) {
 ox = doc.pageX; oy = doc.pageY;
 sx += ox; sy += oy; ex += ox; ey += oy;
 with (doc) { left = sx; top = sy; visibility = vis; }
 }
 else {
 ox = oy = 0;
 with (doc.style) {
 position = "relative"; left = sx; top = sy; visibility = vis;
 }
 }
 }
 else {
 vis = "hidden";
 if (document.layers) with (doc) { left = ox; top = oy; visibility = vis; }
 else with (doc.style) { position = "relative"; left = 0; top = 0; visibility = vis; }
 }

 px = tx = ex - sx;
 py = ty = ey - sy;
 if (px < 0) px *= -1;
 if (py < 0) py *= -1;
 px /= speed; py /= speed;
 if (document.layers) with (doc.document) { open(); write(mes); close(); }
 else doc.innerHTML = mes;
 pos2 = pos; sx2 = sx; sy2 = sy; ex2 = ex; ey2 = ey; tx2 = tx; ty2 = ty;
 if (mes) lay_move();
}

function lay_move() {
 if (tx2 >= 0) sx2 += px; else sx2 -= px;
 if (ty2 >= 0) sy2 += py; else sy2 -= py;
 if (tx2 >= 0 && sx2 > ex2) sx2 = ex2;
 else if (tx2 < 0 && sx2 < ex2) sx2 = ex2;
 if (ty2 >= 0 && sy2 > ey2) sy2 = ey2;
 else if (ty2 < 0 && sy2 < ey2) sy2 = ey2;
 if (document.layers) { doc.left = sx2; doc.top = sy2; }
 else { doc.style.left = sx2; doc.style.top = sy2; }
 if (sx2 != ex2 || sy2 != ey2) id = setTimeout("lay_move()",0);
}
</script>



□ 案内文が収まる位置を１カ所に決める場合
<layer name=lay></layer> 
<a href="" onMouseover="move_set('lay','リンク１の案内文です',0,-200,0,0)"
 onMouseout="move_set('lay')">リンク１</a>　
<a href="" onMouseover="move_set('lay','リンク２の案内文です',700,-100,0,0)"
 onMouseout="move_set('lay')">リンク２</a>　
<a href="" onMouseover="move_set('lay','リンク３の案内文です',0,300,0,0)"
 onMouseout="move_set('lay')">リンク３</a>　

□ 案内文が収まる位置をそれぞれ変える場合
<layer name=lay1></layer> 
<a href="" onMouseover="move_set('lay1','リンク１の案内文です',0,-200,0,0)"
 onMouseout="move_set('lay1')">リンク１</a> 
<layer name=lay2></layer> 
<a href="" onMouseover="move_set('lay2','リンク２の案内文です',700,-100,0,0)"
 onMouseout="move_set('lay2')">リンク２</a> 
<layer name=lay3></layer> 
<a href="" onMouseover="move_set('lay3','リンク３の案内文です',0,300,0,0)"
 onMouseout="move_set('lay3')">リンク３</a>