| CREATIVE POINT F |
クリックで目的のコンテンツに移動するスクリプトを作成する |
| KEY WORD 1 |
気持ちのよいスピードを探す |
||
| KEY WORD 2 |
bodyに「overflow: hidden;」を設定する |
Dreamweaverの挿入メニュー→“レイアウトオブジェクト”→“AP Div”で、絶対座標で配置するdiv要素を作成し、プロパティパネルで「mainBox」と名前をつける。この中に作成してきた画像を配置する【1】。Dreamweaverでは表示の拡大・縮小もできるので、表示メニュー→“ドキュメント全体”でデザインの全体像を確認できる。
div要素「mainBox」のコードの部分で「<div id="mainBox" style="left:-1100px; top:-200px;">」と記述し、左を－1100px、上を－200pxの位置で表示してみる【2】。少しずつ位置を変えながら、この数値を探し出す。同様に左が－350px、上が－860pxの位置【3】、左が－30px、上が－70pxの位置【4】で表示して、ぞれぞれ3つの画面を表示するためには、div要素「mainBox」をどの座標にすればよいのかを確かめる。確かめたら「<div id="mainBox" style="left:0px; top:0px;">」に修正して、左も上も0pxの位置に表示しておく。クリックすると、この3つの画面を移動していくようにしたいのだが、ここでは一枚の画像として配置してしまっているので、プロパティパネルのホットスポットツールでマップを作成する【5】【6】。
目的の座標まで減速しながら動くファンクション「boxMove()」と、目的の座標を指定するファンクション「setTarget(x,y)」を記述し【7】、マップの指定の「Music」の画面へ移動するボタンには「onclick="setTarget(-350,-860)"」、ムービーの画面に移動するボタンには「onclick="setTarget(-30,-70)"」、トップへ戻るボタンには「onclick="setTarget(-1100,-200)"」を書き加える【8】。そして、body要素に「onload="boxMove()"」を書き加えてスクリプトを起動すると、ボタンのクリックで滑らかに移動するようになる【9】。移動するスピードは、変数「speed」で指定できる。数値を大きくするほど遅くなる。気持ちのよい動きになるように、数値を変えて試してみるとよい。あまり早すぎないほうが動きを意識できてよいだろう。しかし、この状態では、スクロールバーが表示されてしまっているので、body要素にCSSで「overflow: hidden;」を設定して、スクロールバーを表示させないようにする【10】【11】【12】。
【1】div要素「mainBox」の中に作成した画像を配置する
【2】トップの画面を表示した場合。この状態でのdiv要素「mainBox」の座標を覚えておく
【3】「Music」の画面を表示した場合。この状態においてのdiv要素「mainBox」の座標を覚えておく
【4】「Movie」の画面を表示した場合。この状態においてのdiv要素「mainBox」の座標を覚えておく
【5】プロパティパネルのホットスポットツールでマップを作成する
【6】「Music」、「Movie」の画面でもマップでボタンとして機能する部分を指定する
| <script type="text/javascript"> <!-- var myX; //現在のx座標 var myY; //現在のy座標 var targetX = -1100; //移動する目標のx座標 var targetY = -200; //移動する目標のy座標 var speed = 40; //移動する速度 function boxMove() { //現在の位置を数値で取得 myX = eval(document.getElementById('mainBox').style.left.replace("px", "")); myY = eval(document.getElementById('mainBox').style.top.replace("px", "")); //一回に動く位置を計算 myX +=(targetX-myX) / speed; myY +=(targetY-myY) / speed; //新しい位置を設定 document.getElementById('mainBox').style.left = myX + "px"; document.getElementById('mainBox').style.top = myY + "px"; //ループ処理 setTimeout("boxMove()",10); } function setTarget(x,y) { //移動する座標の設定 targetX = x; targetY = y; } //--> </script> |
| <map name="Map" id="Map"> <area shape="rect" coords="1580,380,2020,535" href="#" alt="ミュージックへ" onclick="setTarget(-350,-860)"/> <area shape="rect" coords="1580,580,2020,735" href="#" alt="ムービーへ" onclick="setTarget(-30,-70)"/> <area shape="circle" coords="1087,1392,16" href="#" alt="ムービーへ" onclick="setTarget(-30,-70)"/> <area shape="circle" coords="603,719,16" href="#" alt="トップにもどる" onclick="setTarget(-1100,-200)"/> </map> |
【9】クリックすると、滑らかに次の画面に移動する
【10】【11】【12】動きの調整が終われば、スクロールでWebページ内を移動するインターフェイスデザインの完成だ
INDEX スクロールでページ内を移動するインターフェイス
CREATIVE POINT A 窓辺で花をぼかして撮影する
CREATIVE POINT B ひとつの背景画像から複数の画面を想定する
CREATIVE POINT C トップ画面を作成する
CREATIVE POINT D 「Music」のパートの画面を作成する
CREATIVE POINT E 「Movie」のパートの画面を作成する
CREATIVE POINT F クリックで目的のコンテンツに移動するスクリプトを作成する
