Juguemos a colorear

[caricatos]

Hola:

El año pasado, queríamos realizar competencias con Ajax, pero no llegamos a ponernos de acuerdo, pero entre las propuestas, una era de generar las areas de una imagen para mapearlas...

Dejamos de lado el tema, pero hace unos días retomé el hilo, y preparé esta página: Buscador de áreas de imágen

Es bastante sencilla (no suelo preocuparme mucho por el diseño), pero pinchando sobre las figuras de la imagen principal, se reproducen bastante fielmente en el segundo recuadro, y hay un efecto rollover que muchos webmaster quieren implementar (lo sé por experiencia)...

Mi problema es que el algoritmo para detectar las formas, o mejor dicho las coordenadas de los bordes, creo que no es óptimo. También carece de detección de formas regulares como cuadrados o círculos... o rectas...

¿Les parece un buen desafío?

También puede modificarse la imagen original:


El cuadrado es azul y el círculo es verde... pero cualquiera puede modificar esos colores... podrá eso servir para otra competencia...

Saludos

[caricatos]

Hola:

Estaba pensando en evitar los iframes para obtener las coordenadas de la imagen... he pensado en añadir un manejador del evento click y asignar las coordenadas a un objeto Punto, pero si bien es fácil obtener las coordenadas del ratón, revisando el posicionamiento de la imagen, siempre su offset[client]Top/Left es 0, y debo obtener esos datos de la capa contenedora (también probé cambiando algunos estilos...por ejemplo, el display o el position...)

La idea sería:
onload = function() {
tag("imagen").onclick = pinchando
}

Y...

function pinchando(e) { //alert(e.target.id)
if (document.all) {
_x = event.x + document.body.scrollLeft;
_y = event.y + document.body.scrollTop;
}
else {
_x = e.pageX - /*tag("mapable").offsetLeft;// */ e.target.offsetLeft;
_y = e.pageY - tag("mapable").offsetTop;
}
pinchado = new Punto(_x /* - tag("mapable").offsetLeft */ - 1, _y/* - tag("mapable").offsetTop */ - 1);
}

Pero usando e.target.offsetLeft, como comentaba no devuelve la posición de la imagen...

Por cierto, googleando encontré varias respuestas, muchas de ellas mías, pero no lo que estoy planteando...

Saludos