yuitest · April 12, 2014 14:34 · yuitest · Apr 12, 2014
diff --git a/mls.html b/mls.html
 <html>
    <head>
        <meta charset="utf-8">
        <title>ポニーの居る位置をマウスで選択</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
 jQuery.noConflict();
 jQuery(function ($) {
    var targetImg = $('#img');
    var borderBox = $('div.x');
    var apiForm = $('#apiForm');
    var x1 = $('#x1');
    var x2 = $('#x2');
    var y1 = $('#y1');
    var y2 = $('#y2');
    targetImg.one('click', first);
    $('#notHere').click(function () {
        apiForm.submit();
    });
    function mousemove (evt) {
        var
            px = borderBox.myX,
            py = borderBox.myY,
            cx = evt.pageX - 10,
            cy = evt.pageY - 10,
            width = cx - px,
            height = cy - py,
            setx = width > 0 ? px : cx,
            sety = height > 0 ? py : cy
        ;
        borderBox.css({left: setx, top: sety});
        borderBox.width(Math.abs(width));
        borderBox.height(Math.abs(height));
    }
    function first (evt){
        x1.val(evt.pageX - evt.target.offsetLeft);
        y1.val(evt.pageY - evt.target.offsetTop);
        var myx = evt.pageX - 10;
        var myy = evt.pageY - 10;
        borderBox.css({left: myx, top: myy});
        borderBox.myX = myx;
        borderBox.myY = myy;
        targetImg.one('click', second);
        $(document.body).mousemove(mousemove);
    }
    function second (evt){
        x2.val(evt.pageX - evt.target.offsetLeft);
        y2.val(evt.pageY - evt.target.offsetTop);
        $(document.body).off('mousemove', mousemove);
        apiForm.submit();
    }
 });
        </script>
        <style>
 body {position: relative;}
 div.x {
    position: absolute;
    border: solid 2px red;
    margin: 0 0;
    pointer-events:none;
 }
 .simple {
    margin: 0 auto;
    font-family: "Courier New", monospace;
    width: 50%; min-width: 80em;
    border: solid 1px #ccc;
 }
 .centre {text-align: center; }
 .simple h1 {text-align: center; }
 #notHere {font-size: 2em; }
        </style>
    </head>
    <body>
        <div class="x"></div>
        <form id="apiForm" method="get">
            <input type="hidden" id="x1" name="x1" value="" />
            <input type="hidden" id="x2" name="x2" value="" />
            <input type="hidden" id="y1" name="y1" value="" />
            <input type="hidden" id="y2" name="y2" value="" />
            <section class="simple">
                <h1>ポニーサンプルデータ収集</h1>
                <p class="centre">
                    <img src="sample.png" id="img" />
                </p>
                <p class="centre">
                    <button id="notHere">ない</button><br />
                    次々とポニー画像が出る！ポニーの位置をマウスで選択しよう！
                </p>
            </section>
        </form>
    </body>
 </html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ポニーの居る位置をマウスで選択</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	jQuery.noConflict();
	jQuery(function ($) {
	var targetImg = $('#img');
	var borderBox = $('div.x');
	var apiForm = $('#apiForm');
	var x1 = $('#x1');
	var x2 = $('#x2');
	var y1 = $('#y1');
	var y2 = $('#y2');
	targetImg.one('click', first);
	$('#notHere').click(function () {
	apiForm.submit();
	});
	function mousemove (evt) {
	var
	px = borderBox.myX,
	py = borderBox.myY,
	cx = evt.pageX - 10,
	cy = evt.pageY - 10,
	width = cx - px,
	height = cy - py,
	setx = width > 0 ? px : cx,
	sety = height > 0 ? py : cy
	;
	borderBox.css({left: setx, top: sety});
	borderBox.width(Math.abs(width));
	borderBox.height(Math.abs(height));
	}
	function first (evt){
	x1.val(evt.pageX - evt.target.offsetLeft);
	y1.val(evt.pageY - evt.target.offsetTop);
	var myx = evt.pageX - 10;
	var myy = evt.pageY - 10;
	borderBox.css({left: myx, top: myy});
	borderBox.myX = myx;
	borderBox.myY = myy;
	targetImg.one('click', second);
	$(document.body).mousemove(mousemove);
	}
	function second (evt){
	x2.val(evt.pageX - evt.target.offsetLeft);
	y2.val(evt.pageY - evt.target.offsetTop);
	$(document.body).off('mousemove', mousemove);
	apiForm.submit();
	}
	});
	</script>
	<style>
	body {position: relative;}
	div.x {
	position: absolute;
	border: solid 2px red;
	margin: 0 0;
	pointer-events:none;
	}
	.simple {
	margin: 0 auto;
	font-family: "Courier New", monospace;
	width: 50%; min-width: 80em;
	border: solid 1px #ccc;
	}
	.centre {text-align: center; }
	.simple h1 {text-align: center; }
	#notHere {font-size: 2em; }
	</style>
	</head>
	<body>
	<div class="x"></div>
	<form id="apiForm" method="get">
	<input type="hidden" id="x1" name="x1" value="" />
	<input type="hidden" id="x2" name="x2" value="" />
	<input type="hidden" id="y1" name="y1" value="" />
	<input type="hidden" id="y2" name="y2" value="" />
	<section class="simple">
	<h1>ポニーサンプルデータ収集</h1>
	<p class="centre">
	<img src="sample.png" id="img" />
	</p>
	<p class="centre">
	<button id="notHere">ない</button><br />
	次々とポニー画像が出る！ポニーの位置をマウスで選択しよう！
	</p>
	</section>
	</form>
	</body>
	</html>