21/12/2011, 07:00
|
| (Desactivado) | | Fecha de Ingreso: noviembre-2002 Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes Puntos: 317 | |
| Respuesta: Aplicar filtro o similar sobre un elemento SHAPE de una imagen
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 :
◙
◙
◙
◙
◙
◙
◙
|