programming/jsp

이미지회전(파이어폭스)

labj 2012. 3. 21. 13:14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>


<style type="text/css">
<!--


canvas { border: 1px solid black; }
 
body {
 background-color: #FFFFFF;
}

.seat_text_c1 {
 position: absolute;
 border: none;
 font-family: verdana;
 font-size: 10pt;
 font-style: normal;
 font-weight: bold;
 letter-spacing: -1pt;
 text-align: center;
 vertical-align:middle;
 width: 31px;
 height: 17px;
 top: 25px;
 left: 2px;
}

.seat_bg_c1 {
 border: none;
 margin: 0px;
 width: 41px;
 height: 54px;
}

.seat_text_c2 {
 position: absolute;
 border: none;
 font-family: verdana;
 font-size: 10pt;
 font-style: normal;
 font-weight: bold;
 letter-spacing: -1pt;
 text-align: center;
 vertical-align:middle;
 width: 31px;
 height: 17px;
 top: 8px;
 left: 18px;
}

.seat_bg_c2 {
 border: none;
 margin: 0px;
 width: 80px;
 height: 72px;
}


#seat1 {
background: url(./160/table_r_o1.gif) no-repeat center;
}
#seat2 {

}
#seat3 {
background: url(./160/table_r_o3.gif) no-repeat center;
}
#seat4 {
background: url(./160/table_r_o4.gif) no-repeat center;
}


-->
</style>

<script language="JavaScript">
 
 window.onload = function() {
  if(window.XMLHttpRequest) { // ie 외      
  
  } else if(window.ActiveXObject) { // ie
  
  }
 }
 
</script>

<script language="JavaScript">
var degree = 0;
var xvalue = 0;
var yvalue = 0;

//각도 증가
function degreeAdd() {
 degree = parseInt(document.getElementById("value1").value);
 degree = degree+1;
 if(degree==180) degree = 180;
 document.getElementById("value1").value = degree;
 rotate();
}
//각도 감소
function degreeDrop() {
 degree = document.getElementById("value1").value;
 degree = degree-1;
 if(degree==-180) degree = -180;
 document.getElementById("value1").value = degree; 
 rotate();
}

//x 증가
function xAdd() {
 xvalue = parseInt(document.getElementById("value2").value);
 xvalue = xvalue+1;
 document.getElementById("value2").value = xvalue;
 rotate();
}
//x 감소
function xDrop() {
 xvalue = document.getElementById("value2").value;
 xvalue = xvalue-1;
 document.getElementById("value2").value = xvalue;
 rotate();
}

//y 증가
function yAdd() {
 yvalue = parseInt(document.getElementById("value3").value);
 yvalue = yvalue+1;
 document.getElementById("value3").value = yvalue;
 rotate();
}
//y 감소
function yDrop() {
 yvalue = document.getElementById("value3").value;
 yvalue = yvalue-1;
 document.getElementById("value3").value = yvalue;
 rotate();
}


function setDegree(value1) {
 degree = value1;
}

// degree->radian 변환 
function toRad(value1) {
  return value1 * Math.PI / 180;
}

function rotate() {
 degree = document.getElementById("value1").value;
 xvalue = document.getElementById("value2").value;
 yvalue = document.getElementById("value3").value;
 
 if(window.XMLHttpRequest) { // ie 외   
    //if(document.getElementById('canvas')) {
        /*
        Ok!: Firefox 2, Safari 3, Opera 9.5b2
        No: Opera 9.27
        */
  
        var image = document.getElementById('image'+'211001');  
        var canvas = document.getElementById('canvas'+'211001');
        var canvasContext = canvas.getContext('2d');
  
  canvas.setAttribute('width', image.height);
  canvas.setAttribute('height', image.width);
  canvasContext.rotate(toRad(degree));
  canvasContext.drawImage(image, xvalue, yvalue);
  
  
/*
        var image = document.getElementById('image');  
        var canvas = document.getElementById('canvas');
        var canvasContext = canvas.getContext('2d');
      
  canvas.setAttribute('width', image.width);
  canvas.setAttribute('height', image.height);
  canvasContext.rotate(toRad(degree)); 
  canvasContext.drawImage(image, xvalue, yvalue); 
  

  
        switch(p_deg) {
            default :
            case 0 :
                canvas.setAttribute('width', image.width);
                canvas.setAttribute('height', image.height);
                canvasContext.rotate(p_deg * Math.PI / 180);
                canvasContext.drawImage(image, 0, 0);
                break;
            case 90 :
                canvas.setAttribute('width', image.height);
                canvas.setAttribute('height', image.width);
                canvasContext.rotate(p_deg * Math.PI / 180);
                canvasContext.drawImage(image, 0, -image.height);
                break;
            case 180 :
                canvas.setAttribute('width', image.width);
                canvas.setAttribute('height', image.height);
                canvasContext.rotate(p_deg * Math.PI / 180);
                canvasContext.drawImage(image, -image.width, -image.height);
                break;
            case 270 :
            case -90 :
                canvas.setAttribute('width', image.height);
                canvas.setAttribute('height', image.width);
                canvasContext.rotate(p_deg * Math.PI / 180);
                canvasContext.drawImage(image, -image.width, 0);
                break;
        };
 */

       
    //} else {
 } else if(window.ActiveXObject) { // ie
        /*
        Ok!: MSIE 6 et 7
        */
  
        var image = document.getElementById('image');
        switch(degree) {
            default :
            case 0 :
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
                break;
            case 90 :
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
                break;
            case 180 :
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
                break;
            case 270 :
            case -90 :
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
                break;
        };
        
    };
};

// Multiple onload function created by: Simon Willison
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
    var image = document.getElementById('image');
    var canvas = document.getElementById('canvas');
    if(canvas.getContext) {
        image.style.visibility = 'hidden';
        image.style.position = 'absolute';
    } else {
        canvas.parentNode.removeChild(canvas);
    };
    
    rotate(0);
});

</script>


</head>

<body>

<div id="page_content" style="position: absolute; left: 0pt; top: 0pt; width: 100%;height:500px;">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width=1084 bgcolor=FFFFFF><img src="images/area/area4_7b.gif"  border=0></td>
</tr>
</tbody>
</table>


<div id="Seat211001" style="position: absolute; left: 102px; top: 99px; z-index: 0;">
 <!-- firefox인 경우 -->
 <canvas id="canvas211001" style="position:absolute; left: 0px; top: 0px; width: 64px; height: 64px;" >
 <img id="image211001"  alt="A-1-4" src="./images/seat/F4_view3_table_rh_o1.gif"/>
 </canvas>
</div>

<!-- firefox인 경우 -->
<!--
<div id="Seat211001" style="position: absolute; left: 102px; top: 99px; z-index: 0;">
 
 <canvas id="canvas211001" style="position:absolute; left: 0px; top: 0px; width: 64px; height: 64px;" >
 <img id="image211001"  alt="A-1-4" src="./images/seat/F4_view3_table_rhd_o1.gif"/>
 </canvas>
</div>
-->
<!-- 각도, 위치 조절 -->
<div style="position:absolute; left: 802px; top: 11px;">
각도:<input name="value1" id="value1" type="text" value="0"></a>&nbsp;<input type="button" value="+" onclick="javascript:degreeAdd();">&nbsp;<input type="button" value="-" onclick="javascript:degreeDrop();">&nbsp;<br>
---x:<input name="value2" id="value2" type="text" value="0"></a>&nbsp;<input type="button" value="+" onclick="javascript:xAdd();">&nbsp;<input type="button" value="-" onclick="javascript:xDrop();">&nbsp;<br>
---y:<input name="value3" id="value3" type="text" value="0"></a>&nbsp;<input type="button" value="+" onclick="javascript:yAdd();">&nbsp;<input type="button" value="-" onclick="javascript:yDrop();">&nbsp;<br>
<input type="button" value="확인" onclick="rotate();"><br>
</div>

 

 

 

 

 

 

</div>

</body>
</html>


'programming > jsp' 카테고리의 다른 글

jsp로 RSS 서비스 하기  (0) 2012.03.21
이미지회전(IE)  (0) 2012.03.21
'jsessionid'를 통해서 session이 사라지는 문제 해결  (0) 2012.03.21
크로스도메인 자바스크립트 엑세스 문제 해결  (0) 2012.03.21
javascript array 1개인 경우  (0) 2012.03.21

'programming/jsp'의 다른글

  • 현재글이미지회전(파이어폭스)

관련글

티스토리툴바