Subversion Repositories SmartDukaan

Rev

Rev 11238 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/css/imgareaselect-default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/jquery.imgareaselect.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val((Math.round(selection.x1)));
    $('#y1').val((Math.round(selection.y1)));
    $('#x2').val((Math.round(selection.x2)));
    $('#y2').val((Math.round(selection.y2)));  
}

$(function () {
    $('#photo').imgAreaSelect({ handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>
</head>
<body>
<div id="image" style="padding-bottom: 10px">
        <img src='/images/campaignImages/$action.getLink()' id="photo" style="float: left; border: 1px solid gray;">
                <div style="float: left; width: 18%; margin-bottom: 10px; margin-left: 10px;">
    <table style="">
      <thead>
        <tr>
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
            Coordinates
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
                      <td style="width: 30%;"><input type="text" id="x1" value="-"></td>
        </tr>
        <tr>
          <td><b>Y<sub>1</sub>:</b></td>
          <td><input type="text" id="y1" value="-"></td>
        </tr>
        <tr>
          <td><b>X<sub>2</sub>:</b></td>
          <td><input type="text" id="x2" value="-"></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><b>Y<sub>2</sub>:</b></td>
          <td><input type="text" id="y2" value="-"></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
        </div>
</body>
</html>