Foros del Web » Programando para Internet » Javascript »

modificar opacidad de una foto con onmouseover

Estas en el tema de modificar opacidad de una foto con onmouseover en el foro de Javascript en Foros del Web. Hola, tengo esto: Código PHP: echo  "<a href='myweb.php' target='_parent'><img src='"  .  $path  .  "images/$imagenamefull' style='border:1px solid #000000; float:left; margin-right:10px; opacity:0.4; filter:alpha(opacity=40); border:0px;' onmouseover=\"this.src = '../images/$imagenamefull'\" onmouseout=\"this.src = '../images/$imagenamefull'\" ></a>" ;  el tema es que quiero q cuando se pase el ratón sobre la ...
  #1 (permalink)  
Antiguo 21/09/2011, 17:16
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 878
Antigüedad: 19 años, 7 meses
Puntos: 15
modificar opacidad de una foto con onmouseover

Hola, tengo esto:


Código PHP:
echo "<a href='myweb.php' target='_parent'><img src='" $path "images/$imagenamefull' style='border:1px solid #000000; float:left; margin-right:10px; opacity:0.4; filter:alpha(opacity=40); border:0px;' onmouseover=\"this.src = '../images/$imagenamefull'\" onmouseout=\"this.src = '../images/$imagenamefull'\" ></a>"
el tema es que quiero q cuando se pase el ratón sobre la foto de perfil (que es sólo una y sin opacidad, es decir no tengo 2 para intercambiar sino 1 para cambiar opacidad) que está parcialmente opaca (0.4) se cambie a opaco 1, es decir totalmente visible (es como resaltar la foto desde foto aclarada a foto más oscura), cómo hacer esto?
  #2 (permalink)  
Antiguo 21/09/2011, 18:09
 
Fecha de Ingreso: septiembre-2011
Mensajes: 158
Antigüedad: 13 años, 2 meses
Puntos: 15
Respuesta: modificar opacidad de una foto con onmouseover

solo lo adaptas a tu codigo php

Código:
<img src="imagen.jpg" width="100" height="100" border="0" style="-moz-opacity:1;opacity:1;filter:alpha(opacity=100);cursor:hand;" onmouseover="this.style.MozOpacity=0.2;this.style.opacity=0.2;this.filters.alpha.opacity='20'" onmouseout="this.style.MozOpacity=1;this.style.opacity=1;this.filters.alpha.opacity='100'">
  #3 (permalink)  
Antiguo 22/09/2011, 15:03
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 878
Antigüedad: 19 años, 7 meses
Puntos: 15
Respuesta: modificar opacidad de una foto con onmouseover

genial, me funcionó perfectamente y además en todos los navegadores.

otra pregunta, hay algo parecido para que una imagen en color aparezca en blanco y negro (grises) y al pasar el ratón se vuelva a color y al quitar el ratón vuelva a grises?
  #4 (permalink)  
Antiguo 22/09/2011, 15:45
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 13 años, 2 meses
Puntos: 87
Respuesta: modificar opacidad de una foto con onmouseover

No; en principio eso no se puede. Tenés que usar dos imágenes diferentes:

<img name="foto" src="foto_blancoynegro.jpg" onMouseOver="foto.src='foto_color.jpg';" onMouseOut="foto.src='foto_blancoynegro.jpg';" />
__________________
Desarrollador web profesional
  #5 (permalink)  
Antiguo 22/09/2011, 17:07
 
Fecha de Ingreso: septiembre-2011
Mensajes: 158
Antigüedad: 13 años, 2 meses
Puntos: 15
Respuesta: modificar opacidad de una foto con onmouseover

Cita:
Iniciado por humanista Ver Mensaje
genial, me funcionó perfectamente y además en todos los navegadores.

otra pregunta, hay algo parecido para que una imagen en color aparezca en blanco y negro (grises) y al pasar el ratón se vuelva a color y al quitar el ratón vuelva a grises?
DE ECHO SI SE PUEDE MUAJAJAJAJAJAJAJ

Se puede aser con puro javascript o con jquery XD

aca te dejo el tutorial con jquery XD
http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

si quieres aserlo con puro javascript
nadamaas que tarda (como un minuto) en que javascript cambie la imagen a escalas de grises
v
v

http://www.disegnocentell.com.ar/notas2.php?id=253

Última edición por dleal100; 22/09/2011 a las 17:19
  #6 (permalink)  
Antiguo 23/09/2011, 06:59
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 13 años, 2 meses
Puntos: 87
Respuesta: modificar opacidad de una foto con onmouseover

Cita:
Iniciado por dleal100 Ver Mensaje
DE ECHO SI SE PUEDE MUAJAJAJAJAJAJAJ
Necesitás más práctica con tu risa perversa

Además, el método que propusiste implica totalmente el uso de dos versiones de la misma imagen, una a color y una en blanco y negro. El efecto es mucho más atractivo, por otro lado. +1.
__________________
Desarrollador web profesional
  #7 (permalink)  
Antiguo 24/09/2011, 08:02
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: modificar opacidad de una foto con onmouseover

Cita:
Iniciado por dleal100 Ver Mensaje
si quieres aserlo con puro javascript
nadamaas que tarda (como un minuto) en que javascript cambie la imagen a escalas de grises
v
v

http://www.disegnocentell.com.ar/notas2.php?id=253
Es porque ese script está mal optimizado. Te faltó leer la segunda parte:
http://www.disegnocentell.com.ar/notas2.php?id=254
Y aquí en el foro ya propusimos alternativas para lo que se está pidiendo:
http://www.forosdelweb.com/f13/rollo...o-hace-763023/
http://www.forosdelweb.com/f13/image...-color-891744/

Etiquetas: foto, modificar, onmouseover, opacidad, php
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 15:44.