Bueno, nuestro primer intento funciona a medias, porque puedo crear un marco y posicionarlo dentro de la imagen, incluso cambiarle tamaño, pero "manualmente" con un par de inputs... seguiremos probando a ver que sale:
Código HTML:
Ver original<!DOCTYPE html>
<html lang="es" dir="ltr" > <meta http-equiv="content-type" content="text/html; charset=utf8" />
#div-js {
position:relative;
margin:0;
padding:0;
}
#click-js {
margin:0;
padding:0;
}
#frame-js {
position:absolute;
top:0;
left:0;
width:98px;
height:48px;
border:1px #888 dotted;
margin:0;
padding:0;
}
<script type="text/javascript"> var divcont = "div-js";
var clickable = "click-js";
var frame = "frame-js";
function $(target) {
return document.getElementById(target);
}
function clickMe(event) {
posX = (event.offsetX) ? event.offsetX : event.pageX - $(divcont).offsetLeft;
posY = (event.offsetY) ? event.offsetY : event.pageY - $(divcont).offsetTop;
$(frame).style.left = posX + 'px';
$(frame).style.top = posY + 'px';
$(frame).style.visibility = "visible" ;
$("inputx").value = posX;
$("inputy").value = posY;
}
function changeWidth(width) {
$(frame).style.width = width + 'px';
}
function changeHeight(height) {
$(frame).style.height = height + 'px';
}
<img src="triby.jpg" alt="Imagen de prueba" id="click-js" onclick="clickMe(event);" /> <div id="frame-js" style="visibility:hidden;"></div> X:
<input type="text" name="inputx" id="inputx" size="5" readonly="readonly" /><br /> Y:
<input type="text" name="inputy" id="inputy" size="5" readonly="readonly" /><br /> Width:
<input type="text" name="width" value="100" onchange="changeWidth(this.value)" /><br /> Height:
<input type="text" name="height" value="100" onchange="changeHeight(this.value)" />