Foros del Web » Creando para Internet » CSS »

propiedades de img

Estas en el tema de propiedades de img en el foro de CSS en Foros del Web. hola amigos les comento lo que quiero hacer, tengo una imagen y quisiera que este opaca y que cuando pase el mouse se valla aclarando, ...
  #1 (permalink)  
Antiguo 21/11/2007, 09:43
Avatar de juanleonardo  
Fecha de Ingreso: agosto-2007
Mensajes: 382
Antigüedad: 10 años, 4 meses
Puntos: 0
propiedades de img

hola amigos les comento lo que quiero hacer, tengo una imagen y quisiera que este opaca y que cuando pase el mouse se valla aclarando, les cuento que baje de un codigo que hace esto (usa js y css juntos) pero este codigo que baje utiliza "filter" (o como se llame) y me dijeron que ese era solo para explorer.
Por eso me gustaria saber cuales son las propiedades de img en css
Gracias por la ayuda
  #2 (permalink)  
Antiguo 21/11/2007, 14:03
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: propiedades de img

en tu mismo mensaje anterior yo te respondí y te indiqué como tenías que hacer, solo usando 2 líneas de CSS... que cosa no entendistes??
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 21/11/2007, 20:31
Avatar de juanleonardo  
Fecha de Ingreso: agosto-2007
Mensajes: 382
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: propiedades de img

tenes razon webosiris perdon. lo que pasa es que no anda, lo probe pero no pasa nada.
ERA
img{opacity:0.5}
img:hover{opacity:1}
y
<img src="laImagen.jpg">
Gracias por la ayuda
  #4 (permalink)  
Antiguo 21/11/2007, 20:43
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: propiedades de img

pues a mi me funciona, y es un código muy sencillo como para que no funcione... como lo estás incluyendo?
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 21/11/2007, 23:30
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: propiedades de img

Hola

Bueno, veamos.

La sintaxis de opacity funciona en Firefox, Mozilla, Opera y Safari, posiblemente otros también.

La sintaxis de filter: alpha(opacity = xx) funciona en explorer y no en los otros.

Sin embargo, hay que agregar que la sintaxis de explorer no funciona por defecto en todos los elementos, de hecho solo funciona en los elementos que tienen "layout", así que si se aplica a un elemento que no tiene, hay que asignarle dimensiones y/o posicionarlo

Una forma de saber si un elemento tiene o no layout, es mediante el uso de JavaScript, por ejemplo usando una sentencia como esta: element.currentStyle.hasLayout

Así que resumiendo, si quieres aplicar efectos de opacidad a elementos en tu página y quieres que funcione en todos los navegadores, has de aplicar las dos mecánicas combinadas.

Puedes escribir ambas sentencias en el mismo css, aunque eso hará que no valide correctamente, o puedes usar comentarios condicionales para cargar la css correcta para explorer cuando haga falta.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #6 (permalink)  
Antiguo 23/11/2007, 10:23
Avatar de juanleonardo  
Fecha de Ingreso: agosto-2007
Mensajes: 382
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: propiedades de img

webosiris: es asi como lo tengo implementado
CSS
Cita:
<style type="text/css">
<!--
img{opacity:0.5}
img:hover{opacity:1}
-->
</style>
HTML
Cita:
<img src="../Imagenes/Accesorios/Admin/config.JPG" name="im" border="0" align="middle" id="im" onmouseover="high(this)" onmouseout="low(this)">
Gracias amigos por la ayuda
  #7 (permalink)  
Antiguo 24/11/2007, 12:16
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: propiedades de img

Cita:
Iniciado por juanleonardo Ver Mensaje
webosiris: es asi como lo tengo implementado
eso nunca te va a funcionar porque lo estás comentando (para eso <!-- y -->) Dejá el CSS limpio y te funcionará:
Cita:
<style type="text/css">
img{opacity:0.5}
img:hover{opacity:1}
</style>
y el el html podes sacar los onmouseover y similares... y ojo con las mayúsculas, siempre conviente poner todos los nombres de archivos y sus respectivas rutas en minúsculas
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #8 (permalink)  
Antiguo 24/11/2007, 15:20
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: propiedades de img

webosiris, los comentarios <!-- y --> son válidos para CSS siempre y cuando sean usados como juanleonardo lo hizo. Es decir, dentro de la etiqueta <style>

__________________
...___...
  #9 (permalink)  
Antiguo 24/11/2007, 15:35
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: propiedades de img

Cita:
Iniciado por Al Zuwaga Ver Mensaje
webosiris, los comentarios <!-- y --> son válidos para CSS siempre y cuando sean usados como juanleonardo lo hizo. Es decir, dentro de la etiqueta <style>
si si, no digo que no sean válidos, solo digo que si el código esta comentado, pues el navegador no va a tomar el CSS porque justamente.... está comentado
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 24/11/2007, 15:40
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: propiedades de img

Hola webosiris

Me parece que te estás confundiendo. Los comentarios en Css son:

/* esto es un comentario */

Saludos,
  #11 (permalink)  
Antiguo 24/11/2007, 18:46
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: propiedades de img

Y lo que yo quise decir es que esos comentarios en realidad no comentan el CSS, sino que ocultan el código CSS a los navegadores antiguos

Efectivamente el único comentario válido (que realmente "desactiva") el CSS es el /* y */
__________________
...___...
  #12 (permalink)  
Antiguo 24/11/2007, 20:22
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: propiedades de img

Cita:
Iniciado por Al Zuwaga Ver Mensaje
Y lo que yo quise decir es que esos comentarios en realidad no comentan el CSS, sino que ocultan el código CSS a los navegadores antiguos
no, para que sea un comentario como el que dices, el tag de clausura tiene que empezar por //

El comentario puesto es un comentario normal de HTML (y como el CSS esta incrustado en el html, funciona)
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #13 (permalink)  
Antiguo 24/11/2007, 23:00
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: propiedades de img

Hola

En este pequeño ejemplo podemos observar que ambos estilos se aplican correctamente
Código HTML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		<!--
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #fff; }
		#Base { width: 100%; height: 100%; background-color: #fff;}
		#gg {font-weight:900; font-size: 3em;}
		//-->
	</style>
	<style type="text/css">
		<!--
		#p {font-size: 0.5em;}
		-->
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<p id="gg">Texto en un párrafo con letra grande y groda</p>
	<p id="p">Texto en un párrafo con letra pequeñita</p>
</div>
</body>
</html> 
Por otro lado, el vínculo que pusiste, habla de los comentarios y los escripts, los estilos no son scripts.

Por otro lado, si vemos la documentación de los comentarios en CSS, vemos que el uso de los mismo para ocultar los fragmentos de estilo a los navegadores viejos, es correcta.

Uniendo lo que podemos ver en la sección de comentarios del HTML, vemos que los comentarios usando la sitaxis "<!-" y "-->" funcionan diferente solo dentro de las etiquetas style.

Si revisamos la forma de ocultar scripts en el html, vemos que se usa la sintaxis "<!--" y "//-->"; sin embargo, esto es para combinar los efectos de los comentarios html con una forma de interpretar ciertas secuencias de caracteres en JavaScript.

De hecho, obtenemos el mismo efecto con estas formas:
Código HTML:
<!--
scripts ...
//--> 
Código HTML:
<!--
scripts ...
// Final del script --> 
Felicidad
__________________
¡ hey, hou, hou, hey !
  #14 (permalink)  
Antiguo 25/11/2007, 21:16
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: propiedades de img

bueno, yo ya me perdí

de lo único que estoy seguro en este momento es que un comentario... ehhh... estilo como el siguiente, incrustado entre las etiquetas <head> de un documento html, tiene efecto:

Código:
<!--
.algo {
    alguna_propiedad: algun_valor;
}
-->
__________________
...___...
  #15 (permalink)  
Antiguo 26/11/2007, 11:16
Avatar de juanleonardo  
Fecha de Ingreso: agosto-2007
Mensajes: 382
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: propiedades de img

Gracias amigos por las respuestas, y se puso bueno el tema por que aca es cuando uno aprende, no es cierto??
Por otro lado lo probe:
ASI
Cita:
<style type="text/css">
img{opacity:0.5}
img:hover{opacity:1}
</style>
ASI
Cita:
<style type="text/css">
<!--
img{opacity:0.5}
img:hover{opacity:1}
-->
</style>
Y ASI
Cita:
<style type="text/css">
<!--
img{opacity:0.5}
img:hover{opacity:1}
//-->
</style>
Y solamente en firefox anda bien.
Gracias por la ayuda amigos y perdon por las molestias.
  #16 (permalink)  
Antiguo 26/11/2007, 15:06
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Re: propiedades de img

gracias Pato, estoy con gripe y se ve que algunas neuronas ya se me murieron

por oro lado:
Cita:
Iniciado por juanleonardo Ver Mensaje
Y solamente en firefox anda bien..
en que ie lo probastes??
Ya te dije que para que funcione en IE 6 debes de ayudarte con un javascript... en el ie7 debería sin embargo funcionar (y en opera y safari también)...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
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 01:51.