画像移動

画像移動スタ－トファイル作成

最初に画像移動スタ－トファイル click_move.html
を作成します。
ファイル内容は
Move Image に戻り 左サイドナビ｢画像移動｣の中の
画像移動スタ－ト HTML ファイル
から見ることができます。

CSS ファイルの読込

CSS ファイルを読込は Javascript ファイルの読込より先に行います。
これは CSS を読込まないといつまで経ってもコンテンツが表示されないためです。
読込をブロックする JS の前に CSS を読込ませることで、レンダリング(コンテンツの表示)が改善されます。
そして CSS もレンダリングをブロックするので、CSS 自体も非同期で読込むように async 属性を追加して、 非同期で読込んでやれば、レンダリングのスピードは向上、少なくともレンダリングまでの時間は短縮されます。
ただ、CSS 全体を非同期で読込むとレンダリングがガタガタになります。
でも、ページ全体のレイアウトに影響が無い部分の CSS なら非同期でよいのではないかと思います。
<link async href="css/click_move.css"
  rel="stylesheet" type="text/css">
のように記述します。

JavaScript ファイルの読込

JavaScript ファイルを読込みます。
JS ファイルを非同期に読込み、レンダリングのブロックが妨げられないよう Javascript ファイルを body の閉じタグの直前で読込むよう HTML の中に一緒に書込むスタイルもありますが、今回は JavaScript ファイルがそれなりに長くなりますので別ファイルとして読込むことにします。
この時 HTML5 から新たに加わった async 属性を付けると、ページの解析を続けながら、 スクリプトを非同期にダウンロードし、スクリプトはダウンロードの完了後に実行させるもので、 レンダリングを妨げないようになります。
なお、async 属性は、Opera Mini のみ(Opera は対応)未対応のようです。
<script async src="js/click_move.js"
  type="text/javascript">
</script>
のように記述します。

各点の XY 座標の入力欄の作成

各点の XY 座標の入力欄を作成していきます。
テ－ブルを利用して<input>タグで入力フィ－ルドを作ります。

Web 一筆箋

input 文を作成するときの属性について少し説明します。

  1. type

    １行のテキスト入力フィ－ルドを作成する時は、input 要素の type 属性を type="text" とします。
    <input type="text" name="start_x" size="3"
      maxlength="4" value = 50>
    ２行以上にわたる長い文章を入力させたい場合には、input 要素ではなく textarea 要素 <TEXTAREA>～</TEXTAREA> を使用します。

  2. password　今回は使用しません

    入力した文字が直接には表示されなくなり、一般的には｢*｣や｢●｣で置き換えられて表示されます。
    ただし、データが暗号化されるわけではないので、送信されたデータを受け取ることができれば 内容を見ることができます。
    利用の際には注意が必要です。

  3. submit　今回は使用しません

    送信ボタンを作成します。
    フォ－ムに入力したデ－タを送信してもらうには、このボタンが必要です。

  4. name

    入力フィ－ルドの名前を指定します。
    フォ－ムのデ－タが送信されるとき(今回は使用せず)には、 この名前とフォ－ムに入力された内容がセットになって送られます。

  5. size

    表示されるフィ－ルドの横幅を半角文字数(整数)で指定します。
    初期値や実際に表示される幅はブラウザによって異なります。

  6. value

    入力フィ－ルドにあらかじめ表示されるテキストを指定します。
    初期値や実際に表示される幅はブラウザによって異なります。

  7. maxlength

    フィ－ルドに入力できる最大の半角文字数を指定します。
    初期値では入力できる文字数に制限はありません。

  8. button

    汎用的に利用できる押しボタンを作成します。
    このボタン自体に規定の動作はありません。
    主に JavaScript などとともに利用されます。
    今回は、このボタンを押すと onClick="set()" が実行され、 始･終点、各制御点が座標グラフの設定位置に表示されます。
    <input type="button"
      value="入力確定" onClick="set()">

各点の画像表示

始･終点、各制御点 0～5 の画像
点０ 点１ 点２ 点３ 点４ 点５
を表示します。
今回は、この画像のどれかをクリックすると
onClick = "dragOn('img*')"
が実行され、画像位置処理フラグ制御が行われます。
<img src="img/pos-*.png" id="img*"
  onClick = "dragOn('img*')">

XY 座標グラフ表示

<div id="back"></div>
で、XY 座標グラフを表示する領域を確保します。
表示は CSS background-image にて行います。

これで、画像移動スタ－トファイルの作成は完了です。
引き続き画像移動 CSS ファイル作成を行います。


画像移動 CSS ファイル作成　に続く
画像移動概要　に戻る

Move Imageに戻る