画像移動

画像移動 JavaScript
ファイル
click_move.js

MoveImage に戻る

// JavaScript Document

var x = 20;
//画像左端から画像中心までの距離
var y = 20;
//画像上端から画像中心までの距離
//画像の中心がXY座標(0,0)にきた時
var x1 = 88;
/*
 ブラウザ画面左端から画像左端
 までの距離
*/
var y1 = 288;
/*
 ブラウザ画面上端から画像上端
 までの距離
*/ 
var flag = false;
//function dragImg を実行するか否か
var imgName;
//img0～img5 のいずれかが設定される

var	pos_y0;
//クライアントY座標
var	pos_x0;
//クライアントX座標
var	scr_y0;
//プラウザ画面スクロ－ルY座標値
var	scr_x0;
//プラウザ画面スクロ－ルX座標値
var	pos_y1;
//= pos_y0 + scr_y0;
var	pos_x1;
//= pos_x0 + scr_x0;
var	pos_y;
//pos_y1-y1 を四捨五入
var	pos_x;
//pos_x1-x1 を四捨五入
var idn;
//img0～5 の img を除いた数字部分

var	str = new Array();
/*
 str[0]=始点0 X座標
 str[6]=始点0 Y座標
 ～～～～
 str[5]=終点5 X座標
 str[11]=終点0 Y座標
*/
var flagNa;
//str[ ]が数値でない時 true

var	err;
//座標値のエラ数

window.document.onmousemove
 = dragImg;

function dragOn(n) {
  imgName = n;
  if(flag){
    flag = false;
  } else {
    flag = true;
  }
  return flag;
}

function dragImg(event) {
  if(!flag) return;
  pos_y0 = event.clientY - y;
  pos_x0 = event.clientX - x;
	
  scr_y0 = pageYOffset;
  scr_x0 = pageXOffset;
 
  pos_y1 = pos_y0 + scr_y0;
  if(pos_y1 > 500 + y1)
    pos_y1 = 500 + y1;
  if(pos_y1 < -100 + y1)
    pos_y1 = -100 + y1;
	
  pos_x1 = pos_x0 + scr_x0;
  if(pos_x1 > 500 + x1)
    pos_x1 = 500 + x1;
  if(pos_x1 < -100 + x1)
    pos_x1 = -100 + x1;
    
  document.getElementById(imgName).
    style.visibility = "hidden";
  document.getElementById(imgName).
    style.top = pos_y1 + "px";
  document.getElementById(imgName).
    style.left = pos_x1 + "px";
  document.getElementById(imgName).
    style.visibility = "visible";

  pos_y = Math.round(pos_y1-y1);
  pos_x = Math.round(pos_x1-x1);

  idn = eval(imgName.slice(-1));
  document.forms[0].
    elements[idn].value = pos_x;
  document.forms[0].
    elements[idn + 6].value
      = pos_y;
}

function check() {
 err = 0

 for (var i = 0; i <= 11; i++) {
  str[i] =
   document.forms[0].elements[i].
    value;
  if (str[i] == ""){
   err = err + 1;	
   alert("数値が入力されていません");
   }
  if (str[i] < -100){
   err = err + 1;	
   alert(
   "XY座標値は -100 以上を入力ください"
   );
  }
  if (str[i] > 500){
   err = err + 1;	
   alert(
   "XY座標値は 500 以下を入力ください"
   );
  }
  flagNa = isNaN(str[i]);
  if (flagNa == true){
   err = err + 1;	
   alert(
   "数値ではない入力値があります"
   );
  }
 } // for ル－プ END
 return err;
} // check END

function set() {
// 制御点描画開始
  check();
 if (err == 0){ // ①開始
  for (var j = 0; j <= 5; j++) {
   str[j] = eval(str[j]) + x1;
   str[j+6] = eval(str[j+6]) + y1;
   var k = "img" + j;
   document.getElementById(k).
    style.visibility = "hidden";
   document.getElementById(k).
    style.left = str[j] + "px";
   document.getElementById(k).
    style.top = str[j+6] + "px";
   document.getElementById(k).
    style.visibility = "visible"; 
  }
 }// if文①完了
}// set END