Foros del Web - Ver Mensaje Individual - Aplicar filtro o similar sobre un elemento SHAPE de una imagen

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