Y aquí tienen el escript que faltaba
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>HERRAMIENTA PARA CAPTURAR COORDENADAS.</title>
<script type="text/javascript">
var difX = 15 ; //DE ESQUINA SUP-IZQ A 1/2 ANCHO DE IMAGEN "MARCA"
var difY = 15 ; //DE ESQUINA SUP-IZQ A 1/2 ALTO DE IMAGEN "MARCA"
var coordX = [];
var coordY = [];
var visibilidad = "visible";
var clase = "marcas";
var rutaMarcas = "http://img847.imageshack.us/img847/1248/llama2.gif"; //LA MISMA DE marca0
var iniTxCoord ="shape=\"poly\" coords=\"";
var finTxCoord ="\"";
var puntoX, puntoY, nvaMarca, coordMap, recupX, recupY;
function alfa() {
document.getElementById("borrador").disabled = "disabled";
coordX[coordX.length] = puntoX;
coordY[coordY.length] = puntoY;
nvaMarca = document.createElement("img");
nvaMarca.setAttribute("class", clase);
nvaMarca.setAttribute("src", rutaMarcas);
nvaMarca.style.left = coordX[coordX.length-1] + "px";
nvaMarca.style.top = coordY[coordX.length-1] + "px";
document.getElementById("caja").appendChild(nvaMarca);
coordMap = "";
for(c=0; c<coordY.length; c++) {
coordMap += coordX[c] + "," + coordY[c] + ",";
}
document.getElementById("taX").innerHTML = coordX;
document.getElementById("taY").innerHTML = coordY;
if(document.getElementById("mapeo").checked) {
document.getElementById("coordMapeo").value =
iniTxCoord + coordMap + finTxCoord ;
}
}
function bravo(e){
var nvaDifX, nvaDifY;
if(document.getElementById("mapeo").checked) {
nvaDifX = 0;
nvaDifY = 0;
clase = "puntos";
}
else {
nvaDifX = difX;
nvaDifY = difY;
clase = "marcas";
}
puntoX = (document.all) ? e.x - nvaDifX : e.pageX - nvaDifX;
puntoY = (document.all) ? e.y - nvaDifY : e.pageY - nvaDifY;
document.getElementById("marca0").style.left = puntoX +"px";
document.getElementById("marca0").style.top = puntoY +"px";
document.getElementById("marca0").className = clase;
}
function charly(e){
tecla = (document.all) ? e.keyCode : e.which;
var delta = document.getElementById("caja");
if(e.ctrlKey && tecla==90 && coordX!=""){
delta.removeChild(delta.lastChild);
recupX = coordX.pop();
recupY = coordY.pop();
alert("Se eliminan las coordenadas X:"+recupX+ " Y:" +recupY)
document.getElementById("taX").innerHTML = coordX;
document.getElementById("taY").innerHTML = coordY;
}
else if(e.ctrlKey && tecla==82 && recupX!=""){
coordX[coordX.length] = recupX;
coordY[coordY.length] = recupY;
alert("Se recuperan las coordenadas X:"+recupX+ " Y:" +recupY)
nvaMarca = document.createElement("img");
nvaMarca.setAttribute("class", clase);
nvaMarca.setAttribute("src", rutaMarcas);
nvaMarca.style.left = recupX + "px";
nvaMarca.style.top = recupY + "px";
document.getElementById("caja").appendChild(nvaMarca);
recupX = recupY = "";
}
else {
e.returnValue = false;
}
document.getElementById("taX").innerHTML = coordX;
document.getElementById("taY").innerHTML = coordY;
if(document.getElementById("mapeo").checked && coordX!=[]) {
coordMap = "";
for(c=0; c<coordY.length; c++) {
coordMap += coordX[c] + "," + coordY[c] + ",";
document.getElementById("coordMapeo").value =
iniTxCoord + coordMap + finTxCoord ;
}
}
else document.getElementById("coordMapeo").value = "";
}
function borra() {
document.getElementById("coordMapeo").value =
document.getElementById("taX").innerHTML =
document.getElementById("taY").innerHTML = "";
}
</script>
<style type="text/css">
body {text-align: right; }
.marcas {position: absolute; width: 30px; height: 30px; }
.puntos {position: absolute; width: 5px; height: 5px; }
</style>
</head>
<body onkeydown="charly(event)">
<div style="position: absolute; top: 0; left: 0; " id="caja">
<img src="http://img408.imageshack.us/img408/1818/grafiti02.jpg"
id="imag0" style="position: absolute; top: 0; left: 0;
width: 480px; height: 640px; " >
<img src="http://img847.imageshack.us/img847/1248/llama2.gif" id="marca0" style="top: 0; left: 0; "
class="marcas" >
<img src="http://img42.imageshack.us/img42/6156/transparente.gif"
id="imag1" style="position: absolute; top: 0; left: 0; width: 480px;
height: 640px; "
onmousemove="bravo(event)" onclick="alfa()">
</div>
<p style="margin-left: 550px; margin-right: 10px; width: 300px;
background:yellow; text-align: left; " >
<textarea id="taX" readonly="readonly" style="width: 300px;
height: 100px;" title="X">AQUÍ LAS COORDENADAS "X".</textarea>
<textarea id="taY" readonly="readonly" style="width: 300px;
height: 100px;" title="Y">AQUÍ LAS COORDENADAS "Y".</textarea>
Para hacer mapa <input type="checkbox" id="mapeo"><br>
Codigo : <br>
<input type="text" readonly="readonly" id="coordMapeo"
style="width:300px" value="AQUÍ LAS COORDENADAS PARA EL shape poly.">
<br>
<input type="button" value="Borrar" onclick="borra()" id="borrador">
<input type="button" id="borrador" value="Reiniciar"
onclick="window.location.reload(true)">
<br>
Click en el punto donde queremos generar una coordenada para ubicar
la imagen o crear <code>coords</code> de <code>shape</code>. <br>
Para deshacer el último par de coordenadas <b>[CTRL + z]</b>. <br>
Para rehacer el último par de coordenadas <b>[CTRL + r]</b>.
<u>Sólo una vez.</u> <br>
</p>
</body>
</html> La razón para el
checkbox que permite capturar la "cadena" de
coords es que en este efecto la imágenes rodean el dibujo simulando un borde, pero en un
shape no siempre es necesaria tanta precisión. Si queremos un área activa triangular, con tres pares de coordenadas alcanza, pero un borde rellenado con imágenes necesita muchas más.
El 'grafiti' es muy irregular, y entonces aproveché para usar en el ejemplo final una función que tome las mismas coordenadas de las "llamitas" para generar el
shape (aunque esté deshabilitado y al fin use la versión HTML, que como se puede ver, tiene muchas menos coordenadas).
Las funciones "
Undo" y "
Redo" están nada más que para complicarle la vida a quien quiera desarmar la herramienta y estudiarla; y por supuesto, las medidas se ponen en el código, no voy a hacer un formulario para facilitarles las cosas.
Imágenes : ◙ 
◙ 
◙ 
p.d. 1 : como de costumbre ... no esperen ver diseño en mis ejemplos
p.d.2 : como de costumbre ... los truchos de imeiyiyak no me aceptan gifs animados. Subí las imágenes a megaplod en un comprimido.
http://www.megaupload.com/?d=VC9OLS5Q