フローターの導入
インターネットでいろいろなページを訪れると、その効果やレベルはともかくとして、それぞれ人目を引くため工夫を凝らしているのがわかります。たとえば、ページの中に小さな別のページを浮かべたようなパターンは、見覚えがあるかたもおられるでしょう。今回ご紹介するのは、その｢フローター｣をＨＴＭＬ文書(ハイパーテキスト)へ記述する方法です。
ページの中に独立した宣伝のページが浮かんでいたり、ページから目次を独立させて浮かべたり、一般的な使い方はページとそこへ浮かぶページが関連性を持つパターンと持たないパターンに分かれます。しかし、どう使うかはアイデアの問題であり、パターンが違うからとフローターの記述方法までは変わりません。
また、過去３回にわたって連載した｢ＨＴＭＬを使ったスライドショー｣同様、フローターのスクリプトも様々な要素が含まれます。ただし、こちらはスライドショーの場合と違ってページの中へ別のページが浮かびさえすればいいわけです。したがって、今回は具体的なスクリプト全体として記述方法をご紹介するため、まずページをスクロールした時、索引の目次だけが同じ位置に浮かんだまま留まる右のイメージ画のようなページを作成してみました。
イメージ画の実例は｢ここ｣をクリックしていただければご覧いただけますので、まだフローターの具体的なイメージが涌かないかたは、実例のページをスクロールして右上の索引だけが同じ場所へ留まることや、索引を移動した後ページをスクロールすれば索引だけはやはり移動先で留まることをお確かめ下さい(もちろん索引がどの位置にあろうと、文字のどれかをクリックすればページはそこへ移動します)。
ただ、フローターも｢ＨＴＭＬを使ったスライドショー｣のようにインターネット･エクスプローラでないと機能しないのが欠点です。インターネット･エクスプローラでフローターを機能させるためのスクリプトはＨＴＭＬ文書の｢ヘッダ部(<head>と</head>の間)｣と｢本文(<body>と</body>の間)｣最初の２ケ所へ記述する必要があり、実例では、
ヘッダ部(head)への記述
<script>
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.Top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}}
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20)
whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.Top < 0+self.pageYOffset) whichIt.Top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.Top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.Top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (event.mousemove);
return true;
}
if(NS) {
window.captureEvents(event.mouseup|event.mousedown);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
以上がヘッダ部の内容です。ヘッダ部に関しては何も考えず、このまま記述して下さい。そして、ヘッダ部が終わり本文へ入ったら、一番最初にフロートさせたい(浮かべたい)部分のＨＴＭＬ文書(ハイパーテキスト)を｢<div>タグ｣の中(<div>と</div>の間)へ書き込みます。要はフロート部が独立したページだと思えば簡単です。実例の場合だと、中身(索引ボタンの記述)以外は次のようになります。
本文(body)への記述
<div id=floater style="width:422px; height:60px; right:50px; top:5px">
<table width=422 height=60 border=0 cellpadding=0 cellspacing=0><td>
:
フロート部(実例だと索引ボタンの内容)
:
</td></table></div>
必ずしも｢<table>タグ｣を使う必要があるわけではありませんが、使うとフロート部のテキストはバランスがとりやすいのは確かです。したがって、バランスが崩れることよりシンプルな記述へ重点を置くかたは、右のスクリプトから緑の文字の部分を省いて下さっても構いません。
どちらにせよ、このスクリプトで｢60｣、｢422｣とあるのがフロート部の縦横のピクセル値であり(実例の索引は横422ピクセル縦60ピクセル)、それぞれの数値をご自分のフロート部のサイズへ変更して下さい。
サイズの指定が出来たら、残るはそのフロート部をページのどこに置くかです。｢<div>タグ｣の｢style属性｣をご覧いただくと、４つの数値を指定しています。フロート位置を決めるのがフロート部のサイズを除くあとの２つで、実例の場合はフロート部を画面右から50ピクセル上から５ピクセルの位置へ浮かべる設定です。
もし画面左から50ピクセルに設定したいなら｢right:50px｣の代わり｢leftt:50px｣と記述し、ピクセル値でなく画面全体のパーセンテージも使えます。たとえば｢right:80%; top:80%｣と記述すれば、フロート部が画面右から80パーセント上から80パーセントの位置、つまり画面の左下へ浮かぶわけです。ピクセル値とパーセンテージをどう使い分けるかは｢<frame>タグ｣の要領とよく似ていますが、ともかく自分自身で試してみれば微妙なニュアンスも見えてきます。
それより｢フローターの導入｣で一番たいせつなのは、それを何に使うかです。フローターならではのアイデアが閃くまで、このテクニックをホームページへ導入してもさほど効果は期待できないことをお忘れなく！
|
お断り