| Respuesta: Aplicar filtro o similar sobre un elemento SHAPE de una imagen
Ya estoy abonado al tema.
Aunque ahora no estoy trayendo nada nuevo.
Resulta que si ven atentamente el código que está en el mensaje #11 , van a encontrar una referencia a cierto escript llamado "gener aBorde.js". Era —y no hace falta ser experto para darse cuenta— el que generaba las coordenadas para el mapeo y la posición del "borde" con puntos verdes (que ya está necesitando un ajuste).
El asunto es que nunca publiqué esa herramienta, y en estos años ya la perdí. Así que saqué fuerzas de mi temperamento culpógeno, y decidí no editar nada, sino escribir la versión 2.011 del mismo efecto (a modo de conmemoración por mi primer década registrado y molestando a todos en Foros del Web).
Ahora sí, empecé por hacer un borrador de herramienta para capturar coordenadas sobre una imagen. que se va a quedar en "borrador" porque mi culpa no da para una aplicación hecha y derecha. Además, como se vio en el mensaje anterior, caricatos ya puso una en su sitio que funciona muy bien.
Ésta es la página con el efecto terminado 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>DIBUJO EN LLAMAS.</title>
<script type="text/javascript">
var coordX = [405,407,403,393,374,350,332,310,303,310,317,294,269,+
247,222,197,177,183,185,160,138,116,102,96,94,90,87,86,91,101,114,+
131,152,174,190,203,212,219,218,211,200,183,163,139,118,63,52,46,43,+
35,31,31,37,47,55,68,81,100,120,139,161,183,208,235,260,285,308,328,+
347,363,380,392,401,408,414,413,413,403,390,376,363,344,327,305,288,+
279,271,268,269,280,297,316,332,342,349,352,353,346,295,272,253,238,+
228,222,218];
var coordY = [413,435,458,475,472,465,458,459,485,508,527,519,518,+
517,516,513,510,481,452,446,461,472,452,430,405,379,353,325,301,279,+
262,250,248,256,269,286,307,331,357,379,398,411,413,414,407,364,342,+
314,290,266,239,213,186,163,139,119,97,82,65,53,46,43,37,40,46,56,69,+
84,102,119,139,164,190,216,244,269,296,322,344,360,377,387,393,393,+
372,344,317,289,266,250,246,247,257,272,293,313,336,361,427,413,398,+
391,412,432,450];
var coordMap = "";
var rutaMarcas = "http://img847.imageshack.us/img847/1248/llama2.gif";
function inicia() {
for(c=0; c<coordY.length; c++) {
coordMap += coordX[c] + "," + coordY[c] + ",";
}
document.getElementById("activo").coords = coordMap;
//prompt("",coordMap);
}
function pinta0() {
var marco = document.getElementById("caja");
var nvaMarca = document.createElement("img");
nvaMarca.setAttribute("class", "marcas");
nvaMarca.setAttribute("src", rutaMarcas);
nvaMarca.style.left = coordX.shift() + "px";
nvaMarca.style.top = coordY.shift() + "px";
document.getElementById("caja").appendChild(nvaMarca);
pinta1();
}
function pinta1() {
if(coordX.length != 0) setTimeout(pinta0 , 60);
}
//onload = inicia;
</script>
<style type="text/css">
body {font: 100%; color: white; background-color: black; }
h1 {font-size: 1.5em; color: white; }
p {}
.marcas {position: absolute; width: 30px; height: 30px; }
</style>
</head>
<body>
<h1>Destaca parte de una imagen por coordenadas. </h1>
<div id="caja" style="position: relative; margin: auto; width:480px;
height: 640px;" >
<map name="miMapa">
<area shape="poly" id="activo" href="javascript:pinta1()"
coords="413,414,432,431,427,480,406,497,375,493,333,483,328,497,344,
536,334,552,310,549,265,542,206,544,186,539,179,520,188,473,132,499,
117,493,90,410,60,370,38,326,23,261,27,202,40,150,66,103,101,65,153,
45,198,37,245,36,291,53,340,80,387,124,433,210,439,307,412,370">
<area shape="default" nohref>
</map>
<img src="http://img408.imageshack.us/img408/1818/grafiti02.jpg"
usemap="#miMapa" border=0>
</div>
<p>Si la imagen no puede verse completa es recomendable maximizar la
pantalla ( <b>[F11]</b> ) antes de clickear. <br>
El efecto sólo se puede ver una vez. En este ejemplo las coordenadas
se borran luego de ejecutar el escript. <br>
Activando la función <code>inicia()</code> el escript reemplaza las
coordenadas del <code>area</code> HTML por las mismas de las imágenes
que dibujan el borde. </p>
</body>
</html> Continúa en el próximo mensaje. |