Aplicar filtro o similar sobre un elemento SHAPE de una imagen

maf · #1 (**permalink**) 02/12/2003, 22:22

Hola a todos,
Trabajo sobre una pagina con datos dinamicos.
En una sección, una imagen de tuberías debe mostrar graficamente cada parte que posea cierto tipo de defectos segun lo indique la base de datos.
No resulta posible dividir la imagen y aplicar filtros individuales ya que las formas son diversas, y en general poligonales (codos, úes, etc).
Hay alguna forma de aplicar un filtro a un AREA SHAPE, o similar?
Se que podría hacer una imagen para cada posibilidad, pero las opciones y combinaciones son muy numerosas, y si pudiera aplicar un alpha, o similar con distintos gradientes sería más sencillo.
En resumen, ¿puedo aplicar algún efecto distintivo para ciertas coordenadas poligonales de una imagen?

Muchas gracias a todos.

Eztopa · #2 (**permalink**) 21/10/2004, 12:21

Estoy interesado tambien en aplicar un filtro a un area shape si alguien sabe alguna manera por favor que la exponga.

Un saludo

furoya · #3 (**permalink**) 22/10/2004, 12:23

Hola maf , Eztopa :

No creo que haya forma. Lo mejor que se puede hacer es poner el área en foco, para destacarla con la forma del SHAPE.

Otra sería usar una imagen o una capa semitransparente que se ubicara en las mismas coordenadas y con el mismo tamaño del SHAPE. Pero no tendrá la misma forma, a menos que sea RECT.

Código:

 

<HTML><HEAD>
<style>
#marca{position:absolute; font-size:30pt; color:red}
</style>
<BODY onload="marca.focus()">
<button onclick="circulo.focus()">circulo</button>
<button onclick="rectangulo.focus()">rectangulo</button>
<button onclick="poligono.focus()">poligono</button><br>
<button onclick="marca.style.top=imagen.offsetTop+circulo.offsetTop+(circulo.offsetHeight/2); marca.style.left=imagen.offsetLeft+circulo.offsetLeft+(circulo.offsetWidth/2)">Flecha circulo</button>
<button onclick="marca.style.top=imagen.offsetTop+rectangulo.offsetTop+(rectangulo.offsetHeight/2); marca.style.left=imagen.offsetLeft+rectangulo.offsetLeft+(rectangulo.offsetWidth/2)">Flecha rectangulo</button>
<button onclick="marca.style.top=imagen.offsetTop+poligono.offsetTop+(poligono.offsetHeight/2); marca.style.left=imagen.offsetLeft+poligono.offsetLeft+(poligono.offsetWidth/2)">Flecha poligono</button><br>

<MAP NAME="mimapa">
<AREA SHAPE=rect id="rectangulo" COORDS=120,100,320,150 HREF="#" onclick="return false">
<AREA SHAPE=poly id="poligono" COORDS=350,144,311,160,350,210,390,229,570,194,428  ,270,118,236,101,203 HREF="#" onclick="return false">
<AREA SHAPE=circle COORDS=69,71,54 id="circulo" HREF="#" onclick="return false">
</MAP>
<IMG SRC="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" USEMAP="#mimapa" height=300 id=imagen>
<font id="marca">&#9650;</font>

</BODY></HTML>

En el ejemplo la flecha no está exactamente en el medio del área porque es un caracter, usando una imagen es más fácil de hacer.

saludos

furoya

[EDIT]

El ejemplo anterior no es compatible -al menos- con Firefox2, ya que no puede leer los offset del shape.
En el tema

Crear mapa con imagenes?

puse otra versión compatible que usa una forma distinta para ubicar las coordenadas del centro.

Aprovecho para dejar otros enlaces relacionados

sobre MAP y AREA...

Ayuda con Javascrip super Urgente

[/EDIT]

Eztopa · #4 (**permalink**) 22/10/2004, 12:49

Gracias por responder furoya he probado tu ejemplo pero me da error me dice que no está definido "marca". Haber si puedes ayudarme, muchas gracias :)

furoya · #5 (**permalink**) 22/10/2004, 13:09

Tienes toda la razón, me comí el marcador. Además he descubierto que en IE6 los contornos de las áreas no se ven (en IE5 juro que las vi !) . Ya lo corregí en el mismo mensaje.

gracias

furoya

Eztopa · #6 (**permalink**) 22/10/2004, 13:22

vaya no me funciona en IE6 tendré que buscar una solución alternativa, muchas gracias de todas maneras :)

furoya · #7 (**permalink**) 23/10/2004, 12:46

Aquí hay uno con clip (rectangular, claro).

Código:

 

<HTML><HEAD>
<style>
#imagen1{border: 5px blue solid}
#imagen2{border: 5px blue solid}
img{position:absolute; left:100px; top:100px}
</style>
<script>
var destacado=0;
function destaca(clp){
if(destacado==0){
imagen2.style.clip='rect('+clp+')';
imagen1.style.filter='alpha(opacity=25)';
destacado=1;}
else {
imagen2.style.clip='rect(0 0 0 0)';
imagen1.style.filter='';
destacado=0;}
}
</script>
<BODY >
<button onclick="destaca('10 120 155 10')">destaca lámpara</button>
<button onclick="destaca('100 320 160 120')">destaca foros</button>

<IMG SRC="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" height=300 width=579 id=imagen1>

<IMG SRC="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" height=300 width=579 id=imagen2>

</BODY></HTML>

si se me ocurre algo más lo posteo

saludos

furoya

Eztopa · #8 (**permalink**) 24/10/2004, 07:22

Está muy bien este script pero yo necesitaria que al pasar el cursor por encima de cada zona se aplicara el filtro y que cuando el cursor se quitara de la zona en cuestión el filtro dejara de aplicarse a dicha zona.

Un saludo!

furoya · #9 (**permalink**) 28/10/2004, 09:55

Y encima con pretenciones... ( )

Código:

 

<HTML><HEAD><TITLE>DESTACA CON CLIP + AREA.</TITLE>
<style>
#contenedor{position:relative; border:solid 10px blue; height:220px; width:403px} 
#imagen1{position:absolute; height:200px; filter:xray();}
#imagen2{position:absolute; height:200px}
</style>
<script>
function destaca(clp){
var I2=document.getElementById("imagen2");
I2.style.clip='rect('+clp+')';
I2.style.cursor='ne-resize';
}

function restaura(){
var I2=document.getElementById("imagen2");
I2.style.clip='rect(0 '+I2.width+' '+I2.height+' 0)';
I2.style.cursor='';
}
</script>
<BODY >
<h2>Destaca partes de imagen con <tt>clip</tt> y toma eventos con <tt>area</tt>.</h2>

<table align=center><td><div id="contenedor"><MAP NAME="mapa">
<area shape="rect" id="rectangulo1" coords="75,60,220,105" title="FOROS" 
onmouseover="destaca('60 220 105 75')"; onmouseout="restaura()">
<area shape="rect" id="rectangulo2" coords="215,90,310,140" title="Del Web" 
onmouseover="destaca('90 310 140 215')"; onmouseout="restaura()">
</map><img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" id="imagen1">
<img SRC="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" id="imagen2" usemap="#mapa">
</div></td></table>
</BODY></HTML>

saludos

furoya

Eztopa · #10 (**permalink**) 28/10/2004, 10:30

Si señor, impresionante, pero sigo sin poder resolver mi problema porque las formas que tengo son irregulares y ese efecto solo funciona con forma rectangular, e intentado hacerlo funcionar con poly pero no funciona.

De todas formas, muchas gracias Foruya!! :)

furoya · #11 (**permalink**) 05/11/2004, 16:08

Hola otra vez :

cuando dije

Cita:

Iniciado por furoya en el mensaje #844228

...Aquí hay uno con clip (rectangular, claro)...

me refería justamente a que el clip es rectangular.

. . .

Una vuelta de tuerca más.

Código:

<HTML> 
<HEAD> 

<SCRIPT src="gener aBorde.js"></SCRIPT>
<STYLE> 
#imagen{position:absolute; top:100px; left:100px; height:200px} 
</STYLE> 
</HEAD> 
<BODY > 
<h2>Destaca parte de una imagen.</h2>

<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" id="imagen"> 

<!-- COMIENZA PUNTOS -->
<div id="contPuntos" style="position:absolute; top:0px; left:0px;"></div>
<script>
var cadaPunto = "";
var coordenadas = ['170','189','166','185','164','181','162','175','164','168','166','161','167','155','168','148','168','141','167','134','165','127','160','121','152','116','144','115','136','115','128','119','121','125','117','132','115','140','113','150','115','159','119','170','125','178','132','186','139','191','146','195','151','191','147','184','138','177','130','171','125','164','128','157','144','147','153','149','155','159','154','169','155','179','159','187',];
var equis , ye; 
function dibujaPuntos(){ 
for (k = 0; k < (coordenadas.length-2); k = k+2){ 
equis = coordenadas[k]; 
ye = coordenadas[k*1+1]; 
cadaPunto += "<span style='background:lime; position:absolute; top:"+ye+"px; left:"+equis+"px; height:5px; width:5px; font-size:0'></span> "}; 
document.getElementById("contPuntos").innerHTML = cadaPunto; }
</script>
<script>
dibujaPuntos();

function intermitente(){
if (document.getElementById("contPuntos").style.visibility=="hidden")
document.getElementById("contPuntos").style.visibility = "";
else document.getElementById("contPuntos").style.visibility = "hidden"
}

setInterval("intermitente()",500)
</script>
<!-- TERMINA PUNTOS -->

</BODY> 
</HTML>

saludos

furoya

furoya · #12 (**permalink**) 31/12/2005, 11:27

Hola de nuevo :

Ahora que hay un e-drive para subir imágenes, puedo postear el ejemplo que me tuve que guardar al principio.

Cita:

Iniciado por maf

...una imagen de tuberías ... que las formas son diversas, y en general poligonales (codos, úes, etc)...

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 

<html><head><title>DESTACA CON CLIP.</title>
<style type="text/css">
body{background-color:black; color:silver; }
p{text-align:center; margin:2px; }
p{text-align:-moz-center; }
#centrado{margin-left:50%; }
#contenedor{position:relative; background:#808080; height:300px; width:400px; margin-left:-200px; } 
#imagen1{position:absolute; height:300px; }
#imagen2{position:absolute; height:300px; clip:rect(0 0 0 0); }
</style>

<script type="text/javascript">
var sector = new Array(this.length);
sector[0] = "150px 380px,  285px,  350px";
sector[1] = "260px, 400px, 285px, 350px";
sector[2] = "260px, 310px, 285px, 270px";
sector[3] = "252px, 233px, 284px, 200px";
sector[4] = "174px, 221px, 208px, 195px";
sector[5] = "174px, 190px, 208px, 165px";
sector[6] = "250px, 190px, 295px, 155px";
sector[7] = "250px, 150px, 295px, 110px";
sector[8] = "155px, 150px, 208px, 110px";
sector[9] = "210px, 100px, 250px, 70px";
sector[10] = "254px, 62px, 282px, 36px";
sector[11] = "170px, 58px, 200px, 16px";
sector[12] = "140px, 36px, 160px, 10px";
sector[13] = "108px, 90px, 150px, 50px";
sector[14] = "108px, 210px, 150px, 150px";
sector[15] = "50px, 270px, 100px, 200px";
sector[16] = "50px, 150px, 90px, 50px";
sector[17] = "10px, 50px, 40px, 10px";
sector[18] = "10px, 200px, 40px, 110px";
sector[19] = "10px, 310px, 40px, 280px";
sector[20] = "120px, 350px, 190px, 280px";
sector[21] = "10px, 340px, 40px, 300px";
sector[22] = "10px, 380px, 40px, 350px";
sector[23] = "10px, 380px, 150px, 350px";
sector[24] = "10px, 380px, 285px, 350px";

var stop;
var destacado = 0;
var titulo = document.title;

function destaca(){
var I2=document.getElementById("imagen2");

destacado = (destacado == sector.length-1)? 0 : destacado += 1;

I2.style.clip = "rect("+sector[destacado]+")";

document.title = titulo+" "+destacado;
}

function secuencia(){
document.getElementById("paso").disabled = "disabled";

stop = setInterval("destaca()",250)
}
</script>
<body >
<h2>Destaca partes de imagen con <tt>clip</tt>.</h2>

<p><button onclick="secuencia()">Secuencia</button>
<button onclick="document.getElementById('paso').disabled ='';clearInterval(stop)">Detener</button>
<button onclick="destaca()" id="paso">Paso</button></p>

<div id="centrado">
<div id="contenedor">
<img src="http://img18.imageshack.us/img18/6963/curvagristextura2.jpg" id="imagen1" alt="Camino" title="Camino" />
<img src="http://img529.imageshack.us/img529/7773/curvarojatextura20jj.jpg" id="imagen2" alt="Destacado" title="Destacado" />
</div>
</div>

<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
  </p>

</body></html>

Es una variante del anterior, con algún agregado de animación.

Lo que no llego a entender es por qué no me funciona el -moz-image-region. Por suerte hay alguna compatibilidad con clip y pude probarlo en IE/FF. Si alguien tiene un ejemplo del código propietario de Mozilla que pueda ver andando, le quedaré muy agradecido -estoy casi seguro de que hago algo mal-.

Las imágenes son

furoya · #13 (**permalink**) 01/11/2011, 11:54

Y sigo aprovechando el E-drive.

Este nuevo ejemplo usa canvas por una sugerencia de Carlangueitor en

Cambiar de color un <area> en un mapa de imagen?

Es un poco rebuscada, y quizá sea más práctica como alternativa al filtro light de Microsoft, pero me pareció que podía usar este viejo tema y presentarla como una versión simulada de mapeado.

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>
<script type="application/x-javascript">

var canvas, ctx;
var X = 0;
var Y = 0;
var luz = "#f33"
var cursor = "move";
var destino ="#";
var titulo = "";

function draw() {

var imagen = document.getElementById('image1');
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";
ctx.clearRect(0,0,640,480);
ctx.drawImage(imagen, 0, 0);
ctx.fillStyle = luz;
ctx.beginPath();
ctx.arc(X,Y,60,0,Math.PI*2,true);
ctx.fill();

}

function mueve(evento){

var distX = document.getElementById("caja").offsetLeft;
var distY = document.getElementById("caja").offsetTop;

document.title = X+" "+Y+" "+distX+" "+distY;

X = evento.pageX - distX;
Y = evento.pageY - distY;

if ((X>345 && Y>180) && (X<415 && Y<230)){
cursor = "pointer";
luz = "#090";
destino = "http://imageshack.us/photo/my-images/696/davidkatzowicz2.jpg/";
titulo = "Cabeza."
}
else if ((X>350 && Y>285) && (X<390 && Y<310)){
cursor = "pointer";
luz = "#090";
destino = "http://imageshack.us/photo/my-images/849/fabianabarreda.jpg/";
titulo = "Mano Izquierda."
}
else if ((X>180 && Y>240) && (X<240 && Y<280)){
cursor = "pointer";
luz = "#090";
destino = "http://imageshack.us/photo/my-images/545/nataliamartinez.jpg/";
titulo = "Mano Derecha."
}
else {
cursor = "move";
luz = "#f33";
destino = "#"
titulo = ""
}

canvas.style.cursor = cursor;
canvas.title = titulo;

draw()
}

function lleva(){
window.location = destino;
}
onload = draw;

</script>
</head>
<body style="color: #fff; background-color: #000; font-size: 100%; font-weight: 600;">
<h2>Simula '<tt>map, area</tt>' con <tt>canvas</tt>, 
destaca con <em>spot</em> color. (Chrome, Safari, Firefox, no IE)</h2>

<div style="position: relative; margin-left: 10%; width: 640px; height: 480px; " id="caja">
<span style="position: absolute; top: 20px; right:-1em; font: bold 3em cursive; color: #f0f;">*</span>
<img id="image1" src="http://img836.imageshack.us/img836/9695/metropolis03.jpg" >
<canvas id="canvas" onmousemove=mueve(event) onclick="lleva()" 
style="position: absolute; top:0; left: 0; 
width: 640px; height: 480px; " width=640 height=480></canvas>
</div>

<p><span style="font: bold 1.2em cursive; color: #f0f;">*</span> Homenaje a <u>Metrópolis</u>, de <em>Fritz Lang</em>.</p>
 </body>
</html>

Algunas aclaraciones : perfectamente se puede usar un mapa de imagen, si el canvas no lo acepta (no lo probé), se usa el mismo truco que para los mouseover que cambian el elemento que está soportando ese evento, y que es una nueva imagen -transparente- cubriendo todo, a la que se le aplica el mapeo. Otra aclaración tiene que ver con el método para hacer la animación; ya una vez tuve que "reescribir" dinamicamente todo el canvas porque algún navegador no me reconocía el save() , o los métodos para mantener una parte del dibujo mientras modifico la otra, así que en esta ocasión corté por lo sano y ni lo probé. Si ya anda en todos, así se puede mejorar mucho la performance; pero en este ejemplo, redibuja todo a lo bestia.

Por supuesto que el destacado puede ser de forma irregular y hasta se puede cambiar dependiendo de la parte donde se apoye el puntero, también se puede usar un efecto distinto a la 'iluminación de color', como el "XOR" que "borra" el área y deja ver (p.e.) la imagen de fondo, que puede ser la misma del frente, pero editada para que el diseño del destacado no dependa del CSS o HTML, sino que podamos dibujar cualquier cosa. (Viendo los huesos, ahora se me ocurre poner a una persona adelante y un esqueleto detrás, para que parezca una capa de "rayos X").
Otra sugerencia es eliminar el cursor hasta que llegue a un área clickeable, donde sí aparecerá el puntero.

En fin, si alguien lo quiere mejorar, ahí se los dejo.

Imagen :

◙

furoya · #14 (**permalink**) 20/11/2011, 08:42

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.

furoya · #15 (**permalink**) 20/11/2011, 08:44

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

furoya · #16 (**permalink**) 21/12/2011, 06:46

Retomo dos frases del mensaje #13

Cita:

...En fin, si alguien lo quiere mejorar, ahí se los dejo...

Cita:

...quizá sea más práctica como alternativa al filtro light de Microsoft...

Evidentemente nadie lo quiso mejorar, y el hecho de que sea un ejemplo incompatible con IE no me deja muy bien. Así que se me ocurrió probar alguna versión para ese navegador; y tuve demasiados problemas.

Como es mi costumbre voy a contar toda la historia, amén de postear todos los códigos que fui armando.
A quien no le interese el asunto: nos vemos en otro tema. A quién le interesen los filtros DX ... agua, resina y ajo, porque esto va para largo.

Lo primero que hice fue un ejemplo con

-ms-filter: "progid:DXImageTransform.Microsoft.Light()";

que en principio es la simulación de un spot, una "mancha de luz" proyectada sobre una imagen. Eligiendo el color, se puede ver cómo "ilumina" mezclándose con los colores de esa imagen (o texto, o lo que fuere que contenga la capa). Es más o menos lo que hace el canvas

globalCompositeOperation = "lighter";

pero al probarlo noté una diferencia harto evidente: los de máicrosof se tomaron muy en serio eso del "reflector", y no sólo le agregaron atributos para simular hasta el barrido de un cañón seguidor, sino que el spot propiamente dicho degrada hacia la total oscuridad, tal y como hace una luz real adonde no llega con su potencia.

Código:

<!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>EJEMPLO FILTRO light addPoint.</title>

<style type="text/css">

#met {
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light();
position: relative;
width: 640px;
height: 480px;
}

</style>
</head>
<body>
<h1>Simula iluminación con filtro <code>light</code>. (IE)</h1>

<img src="http://img836.imageshack.us/img836/9695/metropolis03.jpg" id=met><br>

<script type="text/javascript">

var imagen=document.getElementById("met");
imagen.filters.item("DXImageTransform.Microsoft.Light").addPoint
(50,50, 1000, 255,170,170, 100)

function mueve(){
imagen.filters.item("DXImageTransform.Microsoft.Light").moveLight
(0, event.offsetX, event.offsetY, 200, 1)
}

imagen.onmousemove = mueve;

</script>
</body>
</html>

OK. Así como viene no nos sirve para emular el efecto del canvas.
Algo que también mencioné es el método con lógica XOR (eXclusive OR). Lo repito para que no tengan que buscarlo: lo que hace es mostrar en dos capas parcialmente superpuestas solamente las partes donde no se cruzan, quiero decir, que donde ocupan el mismo lugar se crea una especie de máscara transparente que deja ver lo que hay detrás. Porque o muestra una o muestra la otra, pero las dos juntas, no.

Hablando en otro tema de círculos que siguen al puntero sobre una capa, mostrando otra capa que tienen detrás como si fueran un "agujero", me acordé que en IE ya había hecho algo así con el filtro chroma, que es la versión DirectX del chroma-k o "pantalla azul" para hacer efectos de video. Si aplico el filtro en una capa que tenga algo en color azul (o verde, o rojo, o el que configure) éste se vuelve transparente, y permite ver lo que hay detrás.
Como otra cosa que mencioné es el efecto de "rayos X" donde transparento una parte de (p.e.) la imagen de una persona, y por allí se ve otra igual, en las mismas coordenadas, pero editada con su esqueleto; se me ocurrió combinar un

filter: progid:DXImageTransform.Microsoft.Light(enabled=tr ue);

con un

filter:progid:DXImageTransform.Microsoft.Chroma(co lor='red');

y entonces mover un círculo "transparentado" con croma-key sobre la imagen principal, para que en su lugar deje ver otra imagen detrás, pero que tiene aplicada en toda su superficie el filtro light para virarla al rojo o al verde, según corresponda. (Y no, no iba a hacer otra imagen editada.)

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<!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>VML CHROMA.</TITLE>
 
<style>
BODY {}

v\:* { behavior: url(#default#VML); }
</style>
<script>
var X = 0;
var Y = 0;
var cursor = "move";
var destino ="#";
var titulo = "";

function colorea() {
document.getElementById("capaFondo").filters.item
("DXImageTransform.Microsoft.Light").addAmbient(255, 150, 150, 100);
}

function mueve(evento){
var alfa = document.getElementById("caja");
var bravo = document.getElementById("spot");
var eco = document.getElementById("capaFondo");

//var distX = alfa.offsetLeft;
//var distY = alfa.offsetTop;

document.title = X+" "+Y /*+" "+distX+" "+distY*/ ;

X = evento.x /*- distX*/ ;
Y = evento.y /*- distY*/ ;

if ((X>305 && Y>160) && (X<340 && Y<220)){
cursor = "pointer";
destino = 
"http://img195.imageshack.us/i/metropolis01a.jpg"; 
titulo = "Cabeza."
eco.filters.item
("DXImageTransform.Microsoft.Light").changeColor(0, 0, 255, 0, 1)

}

else {
cursor = "move";
destino = 
"http://img710.imageshack.us/slideshow/webplayer.php?id=antoniosegui.jpg"
titulo = "A Colección."
eco.filters.item
("DXImageTransform.Microsoft.Light").changeColor(0, 255, 150, 150, 1)
}

bravo.style.left = X - 50 + "px";
bravo.style.top = Y - 50 + "px";



alfa.style.cursor = cursor;
alfa.title = titulo;

}

function lleva(){
window.location = destino;
}


</script>
</HEAD> 
<BODY>
<h1>Efecto <em>spot</em> con filtros <code>chroma</code> y 
<code>light</code>. (IE)</h1>
<div style="position: relative; width:640px; height:480px; "
onclick="lleva()" onmousemove="mueve(event)" id="caja">
<img style="position: absolute; width:640px; height:480px; 
-ms-filter: 
progid:DXImageTransform.Microsoft.Light(enabled=true);
filter: progid:DXImageTransform.Microsoft.Light(enabled=true); " 
src="http://img195.imageshack.us/img195/2089/metropolis01a.jpg" 
onload="colorea()" id="capaFondo">

<div style="position: absolute; width:640px; height:480px; 
-ms-filter:progid:DXImageTransform.Microsoft.Chroma(color='red');  
filter:progid:DXImageTransform.Microsoft.Chroma(color='red'); background-image: url(http://img195.imageshack.us/img195/2089/metropolis01a.jpg); ">

<v:oval style="position: absolute; width:100px; height:100px; 
background-color: transparent; " id="spot" fillcolor="red"
stroke="true" strokecolor="black" strokeweight="0" />

</div>
</div>

<p style="font-size: 110%">El efecto está hecho con una capa que 
tiene la imagen como fondo y aplicado un filtro 
<code>chroma</code>, que "borra" el dibujo circular del 
<code>VML</code> que simula el <em>spot</em>. <br>
Una segunda capa (<code>capaFondo</code>) es una imagen 
detrás de la anterior, y tiene aplicado un filtro 
<code>light</code> que la vira al verde o al rojo según el 
puntero se encuentre o no en el área activa, y es la que 
se ve a través del círculo. </p>
</body>
</html>

Esto es algo muy parecido a lo que se vio en los ejemplos de post anteriores, la diferencia es que en esos casos el recorte era con un clip rectangular, y acá se usa un shape VML.

furoya · #17 (**permalink**) 21/12/2011, 06:51

Si ya vieron el código funcionando, habrán notado que el "rendering" del filtro cromaK es un poco costoso para máquinas no muy potentes. Eso ralentiza el seguimiento del VML al cursor.
Una forma de evitarlo es replantear todo el efecto, y usar sólo Vectorial MarkUp Language; algo como usar sólo canvas. Pero me desanimé cuando el atributo

cromakey="blue"

no funcionó. Supongo que habré hecho algo mal, pero ya no estoy para ponerme a hacer experimentos con un lenguaje del que hay poca bibliografía. La misma gente de Microsoft ya dejó de actualizarlo y liquidó los editores que tenía para descargar.

Entonces recordé el filtro

-ms-filter: progid:DXImageTransform.Microsoft.Compositor(funct ion=??, duration=??);

que —justamente— tiene una función XOR.

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<!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>SPOT CON Compositor Filter 10 Y Light.</title>
<style type=text/css>
v\:* { behavior: url(#default#VML); }

body {font-size: 100%; background: black; color: red; 
font-weight: bold; }
</style>

<script type=text/javascript> 
var X = 0;
var Y = 0;
var cursor = "move";
var destino ="#";
var titulo = "";
 
function colorea() {
/*aplica el efecto de color rojo a 'capaFondo'*/
document.getElementById("capaFondo").filters.item
("DXImageTransform.Microsoft.Light").addAmbient(255, 150, 150, 100);
}
 
function mueve(evento){
var alfa = document.getElementById("caja");
var bravo = document.getElementById("spot");
var charly = document.getElementById("capaFondo");
 
X = evento.x ;
Y = evento.y ;
 
if ((X>255 && Y>160) && (X<320 && Y<210)) /*coordenadas cabeza*/ { 
cursor = "pointer";
destino = "http://img35.imageshack.us/i/metropolis02.jpg"; 
titulo = "Cabeza.";
/*cambia color de 'capaFondo' a verde*/
charly.filters.item
("DXImageTransform.Microsoft.Light").changeColor(0, 0,255,0, 1);
}
 
else {
cursor = "move";
destino = 
"http://img710.imageshack.us/slideshow/webplayer.php?id=antoniosegui.jpg";
titulo = "A Colección.";
/*cambia color de 'capaFondo' a rojo claro*/
charly.filters.item
("DXImageTransform.Microsoft.Light").changeColor(0, 255,150,150, 1);
}
 
bravo.style.left = X - 50 + "px"; // '50' es el radio del spot en px
bravo.style.top = Y - 50 + "px";

alfa.style.cursor = cursor;
alfa.title = titulo;
}
 
function lleva(){
window.location = destino;
}

function inicia(){
capa0.filters.item(0).Apply(); // aplica el filtro a la primera capa
capa0.innerHTML = capa1.innerHTML; // agrega la segunda capa
}

onload = inicia
</script>
</head>

<body>
<h1>Simula un <em>spot</em> sobre la imagen que marca el área activa
cambiando de color. (IE8)</h1>

<div style="width: 640px; height: 480px; position: relative; 
margin: auto; " 
onclick="lleva()" onmousemove="mueve(event)" id="caja">

<img style="position: absolute; width:640px; height:480px; 
-ms-filter: 
progid:DXImageTransform.Microsoft.Light(enabled=true);
filter: progid:DXImageTransform.Microsoft.Light(enabled=true);" 
src="http://img35.imageshack.us/img35/7231/metropolis02.jpg" 
onload="colorea()" id="capaFondo">

<div id="capa0" 
style="-ms-filter: 
progid:DXImageTransform.Microsoft.Compositor(function=10, duration=10); 
filter: 
progid:DXImageTransform.Microsoft.Compositor(function=10, duration=10); 
position: absolute; top: 0; left: 0; width: 640px; height: 480px; ">
<img style="width:640px; height:480px; "
src="http://img35.imageshack.us/img35/7231/metropolis02.jpg" >
</div>

</div>

<div id="capa1" style="display: none">
<v:oval style="position: absolute; width:100px; height:100px; 
background-color: transparent;" id="spot" fillcolor="red"
stroke="true" strokecolor="transparent" strokeweight="0" />
</div>

<p style="font-size: 110%">El efecto está hecho con dos capas 
modificadas con el filtro <code>compositor</code> que borra de la 
<code>capa0</code> el dibujo de la <code>capa1</code>. Una tercera 
capa (<code>capaFondo</code>) tiene aplicado un filtro <code>light
</code> que la vira al verde o al rojo según el puntero se encuentre 
o no en el área activa, y es la que se ve a través del círculo. <br>
El círculo está hecho con <code>VML</code>. </p>
</body>
</html>

Este filtro no es de mis preferidos. La única forma que encontré de hacerlo andar es aplicarlo a una capa y después agregar la segunda vía javascript. Pero como los ajustes de light y la animación ya usaban JS, en este caso no es muy grave.
Salvo por el detalle de que todavía se mueve lento.
Y está claro: está usando el mismo DX que chroma.

Como el asunto ya se estaba haciendo 'personal', empecé a probar otras alternativas. Y encontré dos que podrían servir en el mismo compositor.

Resulta que también nos da la posibilidad de sumar colores entre capas. Quiero decir, que si una tiene un círculo rojo, y la pongo sobre otra que es una fotografía, justo donde le falte el componente "R" en el "RGB" le va a sumar el del círculo. Y eso se parece mucho a un efecto de iluminación.

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<!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>SPOT CON Compositor Filter 9.</title>
<style type=text/css>
v\:* {behavior: url(#default#VML); }

body {font-size: 100%; background: black; color: red; 
font-weight: bold; }
</style>

<script type=text/javascript> 
var X = 0;
var Y = 0;
var cursor = "move";
var destino ="#";
var titulo = "";
 
function mueve(evento){
var alfa = document.getElementById("caja");
var bravo = document.getElementById("spot");
 
X = evento.x ;
Y = evento.y ;
 
if ((X>305 && Y>80) && (X<380 && Y<190)) /*coordenadas cabeza*/ { 
cursor = "pointer";
destino = "http://img41.imageshack.us/img41/3221/metropolis04.jpg"; 
titulo = "Cabeza."
bravo.fillcolor = "#00ff00";
}
 
else {
cursor = "move";
destino = 
"http://img710.imageshack.us/slideshow/webplayer.php?id=antoniosegui.jpg";
titulo = "A Colección.";
bravo.fillcolor = "#ff3333";
}

bravo.style.left = X - 50 + "px"; // '50' es el radio del spot en px
bravo.style.top = Y - 50 + "px";

alfa.style.cursor = cursor;
alfa.title = titulo;

}
 
function lleva(){
window.location = destino;
}

function inicia(){
capa0.filters.item(0).Apply(); // aplica el filtro a la primera capa
capa0.innerHTML = capa1.innerHTML; // agrega la segunda capa
}

onload = inicia;
</script>
</head>

<BODY>
<h1>Simula un <em>spot</em> sobre la imagen que marca el área activa
cambiando de color. (IE8)</h1>

<div style="width: 640px; height: 480px; position: relative; 
margin: auto; " 
onclick="lleva()" onmousemove="mueve(event)" id="caja">

<div id="capa0"
style="filter: 
progid:DXImageTransform.Microsoft.Compositor(function=9, duration=9); 
position: absolute; top: 0; left: 0; width: 640px; height: 480px; ">
<img style="position: absolute; width: 640px; height: 480px; "
src="http://img41.imageshack.us/img41/3221/metropolis04.jpg" >
</div>

</div>

<div id="capa1" style="display: none">
<v:oval style="position: absolute; width: 100px; height: 100px; 
background-color: transparent; " id="spot" fillcolor="#ff3333"
stroke="true" strokecolor="transparent" strokeweight="0" />
</div>

<p style="font-size: 110%">El efecto está hecho con dos capas 
modificadas con el filtro <code>compositor</code> que suma el color 
de la <code>capa0</code> al de la <code>capa1</code>.<br>
El círculo está hecho con <code>VML</code>.</p>
</body>
</html>

Pero —siempre hay un 'pero'— en las partes que tienen un "rojo más alto", como en el blanco que tiene 255,255,255, no se va a notar el cambio. Y como justo en nuestro ejemplo El Ñato está dibujado con blanco, el efecto medio que se pierde. ¿No?.

furoya · #18 (**permalink**) 21/12/2011, 06:55

Bien. Entonces en vez de "sumar el rojo", vamos a "restar los otros". Así queda el rojo (o el verde) sólo, y se ve el cambio.

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<!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>SPOT CON Compositor Filter 8.</title>
<style type=text/css>
v\:* {behavior: url(#default#VML); }

body {font-size: 100%; background: black; color: red; 
font-weight: bold; }
</style>

<script type=text/javascript> 
var X = 0;
var Y = 0;
var cursor = "move";
var destino ="#";
var titulo = "";
 
function mueve(evento){
var alfa = document.getElementById("caja");
var bravo = document.getElementById("spot");
 
X = evento.x ;
Y = evento.y ;
 
if ((X>305 && Y>80) && (X<380 && Y<190)) /*coordenadas cabeza*/ { 
cursor = "pointer";
destino = "http://img41.imageshack.us/img41/3221/metropolis04.jpg"; 
titulo = "Cabeza."
bravo.fillcolor = "#ff00ff";
}
 
else {
cursor = "move";
destino = 
"http://img710.imageshack.us/slideshow/webplayer.php?id=antoniosegui.jpg";
titulo = "Colección.";
bravo.fillcolor = "#00cccc";
}
 
bravo.style.left = X - 50 + "px"; // '50' es el radio del spot en px
bravo.style.top = Y - 50 + "px";

alfa.style.cursor = cursor;
alfa.title = titulo;
}
 
function lleva(){
window.location = destino;
}

function inicia(){
capa0.filters.item(0).Apply(); // aplica el filtro a la primera capa
capa0.innerHTML = capa1.innerHTML; // agrega la segunda capa
}

onload = inicia
</script>
</head>

<BODY>
<h1>Simula un <em>spot</em> sobre la imagen que marca el área activa
cambiando de color. (IE8)</h1>

<div style="width: 640px; height: 480px; position: relative; 
margin: auto; " 
onclick="lleva()" onmousemove="mueve(event)" id="caja">

<div id="capa0"
style="filter: 
progid:DXImageTransform.Microsoft.Compositor(function=8, duration=20); 
position: absolute; top: 0; left: 0; width: 640px; height: 480px; ">
<img style="position: absolute; width: 640px; height: 480px; "
src="http://img41.imageshack.us/img41/3221/metropolis04.jpg" >
</div>

</div>

<div id="capa1" style="display: none">
<v:oval style="position: absolute; width: 100px; height: 100px; 
background-color: transparent; " id="spot" fillcolor="white"
stroke="true" strokecolor="transparent" strokeweight="0" />
</div>

<p style="font-size: 110%; color:yellow">El efecto está hecho con dos 
capas modificadas con el filtro <code>compositor</code> que resta el 
color de la <code>capa0</code> al de la <code>capa1</code>. En este 
caso hay que usar el código de color inverso al que queremos ver. <br>
Así, para mostrar el <code style=color:#00ff00>lime</code> restamos el 
<code style=color:#ff00ff>fuchsia</code>, y para ver el 
<code style=color:#ff3333>red</code> (claro) restamos el 
<code style="color:#005151; background:white">aqua</code> (oscuro). <br>
El círculo está hecho con <code>VML</code>.</p>
</body>
</html>

Por supuesto, para "iluminar" de verde hay que restar el azul y el rojo del blanco

Código:

	 R	 G	 B
	255	255	255	blanco
-	255	  0	255	fuchsia
	———————————————————
	  0	255	  0	verde

Y la misma operación para el rojo.

Sí. Obvio. Al negro (0,0,0) no se le puede restar nada.

Solamente cambiamos el problema de lugar.

¿Y ahora de qué nos disfrazamos?

Resulta que hay un modo de "colorear" que no suma ni resta colores, sino que los mezcla. Al superponer dos capas el navegador toma cada pixel de la capa delantera y promedia su color con el del pixel que está detrás en las mismas coordenadas. El efecto crea una ilusión de transparencia, que a estas alturas ya conocemos todos.

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<!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>DESTACADO CON OPACIDAD.</title>
<style type=text/css>
v\:* {behavior: url(#default#VML); }

body {font-size: 100%; background: black; color: red; 
font-weight: bold; }
</style>

<script type=text/javascript> 
var cursor, destino, titulo, visibilidad, X, Y;

function mueve(evento){
var alfa = document.getElementById("caja");
var bravo = document.getElementById("spotVML");
var charly = document.getElementById("spotCanvas");
var distX = document.getElementById("caja").offsetLeft;
var distY = document.getElementById("caja").offsetTop;
document.title = X+" "+Y+" "+distX+" "+distY;X = (evento.pageX) ? evento.pageX - distX : evento.x ;
Y = (evento.pageY) ? evento.pageY - distY : evento.y ;

if ((X>380 && Y>20) && (X<480 && Y<170)) /*coordenadas calavera*/ { 
cursor = "pointer";
destino = "http://imageshack.us/photo/my-images/593/hddm01.jpg";
titulo = "Huesuda.";
visibilidad = "visible";
}
 
else {
cursor = "alias";
destino = 
"http://img710.imageshack.us/slideshow/webplayer.php?id=antoniosegui.jpg";
titulo = "A Colección.";
visibilidad = "hidden";
}
 
alfa.style.cursor = cursor;
alfa.title = titulo;
bravo.style.visibility = 
charly.style.visibility = visibilidad;

}
 
function lleva(){
window.location = destino;
}

function dibujaEstrella() {
var canvas = document.getElementById("spotCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255,195,0,.3)";
ctx.translate(100,100);
ctx.save();
ctx.beginPath();
ctx.moveTo(100,0);
for (i=0;i<9;i++){
ctx.rotate(Math.PI/5);
if(i%2 == 0) {
ctx.lineTo((100/0.425731)*0.200811,0);
} 
else {
ctx.lineTo(100,0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
}

onload = dibujaEstrella;
</script>
</head>

<BODY>
<h1>Destaca una parte de la imagen que tiene el área activa
agregando una capa semitransparente. </h1>

<center><div style="width: 608px; height: 464px; position: relative; 
m/argin: auto; overflow: hidden; background-image: 
url(http://img593.imageshack.us/img593/4725/hddm01.jpg); " 
onclick="lleva()" onmousemove="mueve(event)" id="caja">

<v:shape style="position: absolute; width: 100px; height: 100px; 
background-color: transparent; visibility: hidden; 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
top:40px; left: 185px; " id="spotVML" fillcolor="#ffc300" 
stroke="true" strokecolor="#ffc300" strokeweight="0" 
coordorigin="-110 50" coordsize="90,90" path="m 8,65 
l 65,54, 92,11, 121,56, 174,65, 130,100, 142,155, 92,131, 42,155, 50,100 x e" />

<canvas id="spotCanvas" width="200" height="200" 
style="position: absolute; top: -45px; left: 135px; visibility: hidden;"></canvas>

</div></center>

<p style="font-size: 110%; color:yellow">
La estrella está hecha con <code>VML</code> para <strong>Internet 
Explorer</strong> y con <code>canvas</code> para los demás 
navegadores. </p>
<p style="color: black; background-color: white;">Homenaje a 
"<u><em>Hasta después de muerta</em></u>" (1916, Ernesto Gunche / 
Eduardo Martinez de la Pera / Florencio Parravicini).</p>
</body>
</html>

Un par de consideraciones sobre este ejemplo.

El destacado semitransparente no siempre queda bien; de hecho, esa foto lo prueba, pero me quedé sin imágenes de Metrópolis y ya era hora de que homenajeara un poco al cine argentino.

Las estrellas no son iguales, la de VML la escribí a mano, para mostrar cómo se arma el path. Y encima es medio complicado porque ni siquiera usa pixeles, tiene una medida relativa que se declara dentro del código. Muy raro.
Para cuando hice la estrella canvas, ya tenía las paciencias por el piso y terminé copiando algún código pre-hecho. Total, la idea ya se entendió : le podemos dar cualquier forma. El drama es que ese escript no toma el punto de inicio arriba sino a la derecha, y de allí empieza a rotar las coordenadas; por eso quedó torcida. Y no la voy a arreglar.

De cualquier forma, todos sabemos que en PHP se pueden generar archivos de imagen a partir de coordenadas. Si cargamos en el servidor todos los "recortes" que necesitamos, el navegador los baja ya hechos y los usa como capa. Y nos ahorramos tanto problema de compatibilidad.

Justamente, el último ejemplo es más compatible y ya no tiene el circo de la capa siguiendo al puntero. Con ubicar las imágenes ocultas en su sitio, las podemos "aparecer" con un hover o un mouseover en un mapeado.

Y sí, tambien podemos usar globalCompositeOperation o DXImageTransform.Microsoft.Compositor() con otros efectos, para destacar con la misma imagen descargada, en vez de generada.

Un problema que adelanto para quien vea este tema dentro de algunos años, es que no preví que MS incorporara canvas. Para que ese día no termine mostrando juntas las dos capas del código precedente, habrá que poner algún condicional que use uno o el otro método. Y más tarde borrar el de Internet Explorer.

furoya · #19 (**permalink**) 21/12/2011, 07:00

Tomando un poco de los tres últimos párrafos, quedaría algo así

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<!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>DESTACA PARTE DE IMAGEN ACTIVA.</title>
<style type=text/css>
v\:* {behavior: url(#default#VML); }

body {font-size: 100%; background: black; color: red; 
font-weight: bold; }

.oscuro { opacity: .6; filter: 
progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
.claro { opacity: 1; filter: 
progid:DXImageTransform.Microsoft.Alpha(opacity=100);}

</style>

<script type=text/javascript> 

function inicia(){

if(document.getElementById('canvas').getContext) {
var imagenA = document.getElementById('imagenFrente');
var imagenB = document.getElementById('mascara0');
var ctx = document.getElementById('canvas').getContext('2d');

ctx.drawImage(imagenB, 365, 25);
ctx.globalCompositeOperation = 'source-atop';
ctx.beginPath();
ctx.drawImage(imagenA, 0, 0);
ctx.close();
}

else{
capa0.filters.item(0).Apply(); // aplica el filtro a la primera capa
capa0.innerHTML = capa1.innerHTML; // agrega la segunda capa
}

}

function destaca0() {
document.getElementById("imagenFondo").className = "claro";
}

function destaca1() {
document.getElementById("imagenFondo").className = "oscuro";
}

onload = inicia
</script>
</head>

<BODY>
<h1>Destaca una parte de la imagen con área activa
oscureciendo el resto. </h1>

<div style="width: 608px; height: 464px; position: relative; " id="caja">

<img id="imagenFondo" src="imagMetropolisTorresRios/hddm01.jpg" 
style="position: absolute; top:0; left: 0; width: 608px; height: 464px; " class="claro">


<div id="capa0"
style="filter: 
progid:DXImageTransform.Microsoft.Compositor(function=5, duration=9); 
position: absolute; top: 0; left: 0; width: 608px; height: 464px; ">

<canvas id="canvas" style="position: absolute; top:0; left: 0; width: 608px; height: 464px; display inline;" width="608" height="464">

<![if !IE]>
<img id="mascara0" src="http://img215.imageshack.us/img215/6269/mascarahuesuda2.gif">
<![endif]>

<img style="position: absolute; width: 608px; height: 464px; "
src="http://img593.imageshack.us/img593/4725/hddm01.jpg" 
id="imagenFrente">
</canvas>
</div>

<map name="mapeado">

<area shape="poly" coords=
"436,131,426,135,414,140,398,144,388,128,382,137,369,149,361,146,363,130,376,120,389,110,389,92,382,82,388,51,412,23,446,27,463,38,474,66,465,99,447,106,447,126," 
href="http://imageshack.us/photo/my-images/593/hddm01.jpg/" onmouseover="destaca1()" onmouseout="destaca0()" title="Huesuda." >
</map>

<img src="http://img42.imageshack.us/img42/6156/transparente.gif" style="position: absolute; top:0; left: 0; border: 0; width: 608px; height: 464px; " usemap="#mapeado">

</div>

<div id="capa1" style="display: none">
<img id="mascara0" src=
"http://img215.imageshack.us/img215/6269/mascarahuesuda2.gif" 
style="position: absolute; top:25px; left:365px; background-color: transparent; ">
</div>

<p style="font-size: 110%"></p>
</body>
</html>

que sigue sin ser definitivo, y está bastante desprolijo, pero se acerca más a un efecto usable en una página real. La "máscara" es un GIF 'real', ya que no tengo un servidor donde subir una versión con imágenes creadas en PHP; y usé sólo una para no complicarlo demasiado (en canvas es un infierno, no puedo hacer andar el clearRect(0,0,608,464) para reescribir). El área activa es un shape="poly" real y usa el método "sánguche" : todas las capas están entre el "fondo" y el "mapa", para no tener problemas con los eventos.

Aquí los dejo. Por ahora es lo que hay. Hasta que —insisto— a alguien se le ocurra otra idea mejor.

❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖

Sobre VML.

Como hacer graficas de pastel y de barras

askii (HTML) y binario (imagen) en una misma página

vml con html (xml). codigo raro.

http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

http://www.w3.org/TR/NOTE-VML

http://www.sjsu.edu/faculty/watkins/vml.htm

Sobre filtro chroma, compositor y globalCompositeOperation.

Letras o imagenes transparentes

Barra de desplazamiento personalizada...

Efecto Máscara / Marquesina

Texto transparente en Firefox (como filter chroma)

Banner en scrollbar.

poner una imagen al cursor

http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx (chroma)

http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx (compositor)
http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx (funciones compositor)

Sobre filtro light.

http://msdn.microsoft.com/en-us/libr...,printer).aspx

Sobre recortes PHP.

Mapa con iluminación de zonas

Tema que dio origen a las actualizaciones :
Cambiar de color un <area> en un mapa de imagen?

Imágenes :

◙

◙

furoya · #20 (**permalink**) 31/01/2012, 21:20

Fui un poco injusto con eso de que usar canvas era un infierno. Al final resultó mucho más fácil que echar a andar sin bugs el filtro de MS. Vuelvo más que nada por eso, para limpiar mi falta poniendo un último ejemplo con 2 áreas activables (por supuesto, el método permite algunas más).

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<!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>DESTACA PARTES DE IMAGEN COMO MÁSCARA.</title>
<style type=text/css>
v\:* {behavior: url(#default#VML); }

body { font-size: 100%; background: black; color: red; 
font-weight: bold; }

.oscuro { opacity: .6; filter: 
progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
.claro { opacity: 1; filter: 
progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
.oculta { visibility: hidden; }
.muestra { visibility: visible; }
</style>

<script type=text/javascript> 
var alto = 464; // alto de la imagen en px
var IE = false;

var imagenA = new Image();
var imagenB = new Image();
var imagenC = new Image();
imagenA.src = "http://img593.imageshack.us/img593/4725/hddm01.jpg";
imagenB.src = "http://img215.imageshack.us/img215/6269/mascarahuesuda2.gif";
imagenC.src = "http://img828.imageshack.us/img828/9876/silviaparodi0.gif";

function cambia(indio,xray,yanky,mike){
if(!IE) {
ctx = document.getElementById('canvas').getContext('2d');
ctx.save()
ctx.clearRect(0,0,608,464);

ctx.drawImage(indio, xray, yanky);

ctx.globalCompositeOperation = 'source-atop';
ctx.beginPath();
ctx.drawImage(imagenA, 0, 0);
ctx.restore();
}

if(document.getElementById("imagenFondo").className == "oscuro"){
document.getElementById("imagenFondo").className = "claro";
document.getElementById(mike).className = "oculta";
}
else{
document.getElementById("imagenFondo").className = "oscuro";
document.getElementById(mike).className = "muestra";
}}

function inicia() {
if(!document.getElementById('canvas').getContext){
IE = true;
capa0.filters.item(0).Apply(); // aplica el filtro a la primera capa
capa0.innerHTML = capa1.innerHTML; // agrega la segunda capa
capa1.innerHTML = ""; // borra para no repetir id's
}}

function reinicia(){
window.location.reload(true)
}

onload = inicia; 
onblur = reinicia; //PARA UN BUG EN IE
</script>
</head>

<BODY>
<h1>Destaca cada parte de la imagen con área activa
oscureciendo el resto. </h1>

<div style="width: 608px; height: 464px; position: relative; " id="caja">

<img id="imagenFondo" src="http://img593.imageshack.us/img593/4725/hddm01.jpg" 
style="position: absolute; top:0; left: 0; width: 608px; height: 464px; " class="claro">


<div id="capa0"
style="filter: 
progid:DXImageTransform.Microsoft.Compositor(function=5, duration=9); 
position: absolute; top: 0; left: 0; width: 608px; height: 464px; ">

<canvas id="canvas" style="position: absolute; top:0; left: 0; width: 608px; height: 464px; display: block;" width="608" height="464">

<img style="position: absolute; width: 608px; height: 464px; "
src="http://img593.imageshack.us/img593/4725/hddm01.jpg" id="imagenFrente">
</canvas>
</div>

<map name="mapeado">

<area shape="poly" coords="436,131,426,135,414,140,398,144,388,128,382,137,369,149,361,146,363,130,376,120,389,110,389,92,382,82,388,51,412,23,446,27,463,38,474,66,465,99,447,106,447,126" href="http://img710.imageshack.us/slideshow/webplayer.php?id=antoniosegui.jpg" onmouseover="cambia(imagenB,365,25,'mascara0')" onmouseout="cambia(imagenB,0,alto,'mascara0')" title="Huesuda." >

<area shape="poly" coords="189,125,187,129,185,135,182,142,176,141,172,141,168,141,160,144,155,145,148,140,142,136,136,127,138,117,130,108,126,95,128,85,135,79,145,82,157,78,173,81,186,90,187,108,186,115" href="http://acceder.buenosaires.gov.ar/images/do/4/9/e/49ead00804fd1c7ad03a992ecf628c95.jpg" target="_blank" onmouseover="cambia(imagenC,128,77,'mascara1')" onmouseout="cambia(imagenC,128,alto,'mascara1')" title="Silvia Parodi." >
</map>

<img src="http://img42.imageshack.us/img42/6156/transparente.gif" style="position: absolute; top:0; left: 0; border: 0; width: 608px; height: 464px; " usemap="#mapeado">

</div>

<div id="capa1" style="display: none">
<img id="mascara0" src="http://img215.imageshack.us/img215/6269/mascarahuesuda2.gif" style="position: absolute; top:25px; left:365px; background-color: transparent; " 
class="oculta">

<img id="mascara1" src="http://img828.imageshack.us/img828/9876/silviaparodi0.gif" style="position: absolute; top:77px; left:128px; background-color: transparent; " 
class="oculta">
</div>

<p style="font-size: 110%"></p>
</body>
</html>

El canvas simplemente se reescribe "llamando" a una máscara que es la que enviamos con el evento sobre el mapa. Cada uno tiene una variable distinta que coincide con una imagen precargada que "tapa" la parte de la foto que le corresponde y no permite que se transparente contra el fondo negro. Así la destaca.

Con el DX sería mucho más fácil de hacer, porque tenemos ya ubicados todos los recortes en su sitio y con CSS los hacemos visibles, o no. Los que aparecen cubren su parte de la foto y logran así el mismo efecto que el otro método.
Salvo por un pequeño detalle : se tilda. Es muy evidente al moverse a otra página y después regresar. La máscara se queda fija y ya no responde a los eventos.
Si recargamos el documento se resetea y arranca de nuevo, así que aproveché este arreglo y puse un escript que recarga cuando pierde el foco (es decir, cuando salimos de la página hacia otra pestaña o ventana). Parche lamentable, que ni siquiera anda en IE6, pero es lo que hay.

◙

Edición:
Aquí hay algunos ejemplos más sobre el asunto. Al menos el asunto del que se escribió antes, con un área rectangular.

Colorear imagen mapeada