Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Pasar una imagen a escala de grises

Estas en el tema de Pasar una imagen a escala de grises en el foro de HTML en Foros del Web. Hola quiero pasar a escala de grises una imagen cargada en html y pues si pongo esto funciona @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < ...
  #1 (permalink)  
Antiguo 09/01/2014, 11:29
 
Fecha de Ingreso: noviembre-2013
Mensajes: 84
Antigüedad: 9 años, 10 meses
Puntos: 1
Pasar una imagen a escala de grises

Hola quiero pasar a escala de grises una imagen cargada en html y pues si pongo esto funciona

Código HTML:
Ver original
  1. <div id="eventos">
  2.                
  3.                 <a href="#seg_pag" ><img src="img/evento.jpg" style=" position:absolute; width: 100%; height: 100%;" id="matrix" onclick=" clicenimagen=1, guardar(), imagen_evento(), ir_a('pagina2')"></a>
  4.            
  5.             </div>

Código CSS:
Ver original
  1. #eventos{
  2.    
  3.     position:absolute;
  4.     top:8%;
  5.     left:10%;
  6.     width: 70%;
  7.     height: 80%;
  8.     border: 1px solid white;
  9.    -webkit-filter: grayscale(100%);
  10.    
  11. }


pero lo que quiero es cambiarlo con javascript pero al poner esto

Código Javascript:
Ver original
  1. if (objeto == 3){document.getElementById('eventos').style.filter='grayscale(100%)';}

no me lo reconoce porque segun veo tiene que tener compatibilidad con webkit si nó no funciona, que puedo hacer?, se que con canvas se puede cambiar la propiedad de color de las imágenes, pero quisiera saber si hay otra forma mas sencilla.
  #2 (permalink)  
Antiguo 09/01/2014, 11:36
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.550
Antigüedad: 11 años, 10 meses
Puntos: 977
Respuesta: Pasar una imagen a escala de grises

Hazlo así:

Código Javascript:
Ver original
  1. document.getElementById('eventos').style.webkitFilter = 'grayscale(100%)';

Esa forma de escribir las propiedades se llama camelCase y se emplea para casos de propiedades que, en escritura CSS, tienen un guión en medio. De cualquier forma, debiste publicar este tema en el foro de JavaScript.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 09/01/2014, 11:52
 
Fecha de Ingreso: noviembre-2013
Mensajes: 84
Antigüedad: 9 años, 10 meses
Puntos: 1
Respuesta: Pasar una imagen a escala de grises

Perfecto funciona como quiero muchas gracias :).

Etiquetas: escala, href
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:37.