Question

我正在使用Odyniec.net的imgAreaSelect创建一个具有命名标记功能的网站。

我唯一感到困惑的是添加一个文本框供用户添加名称。理想情况下，我想在用户选择的区域下面放置一个文本框。

修改：这是我到目前为止的整个页面。我可以创建名称标签并发送值，但我想让用户选择区域下方的框而不是图像的底部。

<?php
$x1 = $_REQUEST["x1"];
$y1 = $_REQUEST["y1"];
$x2 = $_REQUEST["x2"];
$y2 = $_REQUEST["y2"];
$name = $_REQUEST["name"];

$width = $x2 - $x1;
$height = $y2 - $y1;
$left = $x1;
$top = $y1;

if ($width < 130){
    $adj_width = ((120 - $width)/2);
}
else { $adj_width = $width; }

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="imgareaselect/css/imgareaselect-deprecated.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.circle {
    border-radius: 50%/50%; 
    border: 8px solid white;
    opacity: .9;
}
.name {
    background-color: #FFF;
    border: 1px solid #CCC; 
    width: 130px;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align:center;
}

</style>
</head>

<body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="scripts/jquery.imgareaselect.pack.js"></script>

<div id="container"> 

  <div style='left:<?php if($width < 130){ echo $left - $adj_width . "px;"; } else { echo $left . "px;"; } ?> top:<?php echo $y1; ?>px; position:fixed'>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center"><div class="circle" style="height:<?php echo $height; ?>px; width:<?php echo $width; ?>px;" >&nbsp;</div></td>
      </tr>
      <tr>
        <td align="center"><div class="name"><?php echo $name; ?></div></td>
      </tr>
    </table>
  </div>

<img id="my_image" src="image.jpg" />

</div>

<form action="index.php" method="post">
  <input type="hidden" name="x1" value="" />
  <input type="hidden" name="y1" value="" />
  <input type="hidden" name="x2" value="" />
  <input type="hidden" name="y2" value="" />
  <input type="text" name="name" value="" />
  <input type="submit" name="submit" value="Submit" />
</form>


<script type="text/javascript">
$(document).ready(function () {
    $('#my_image').imgAreaSelect({
        aspectRatio: '4:4',
        handles: false,
        fadeSpeed: 400,
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="x2"]').val(selection.x2);
            $('input[name="y2"]').val(selection.y2);

        }
    });
});
</script>

</body>
</html>

将输入框添加到imgareaselect

0 个答案: