| Respuesta: Aplicar filtro o similar sobre un elemento SHAPE de una imagen
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
Última edición por furoya; 09/04/2012 a las 20:52
Razón: actualizar con enlace.
|