propiedades de img

[juanleonardo]

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

[webosiris]

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??

[juanleonardo]

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

[webosiris]

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

[PatomaS]

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

[juanleonardo]

webosiris: es asi como lo tengo implementado
CSS

<style type="text/css">
<!--
img{opacity:0.5}
img:hover{opacity:1}
-->
</style>

HTML

<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

[webosiris]

Iniciado por juanleonardo

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á:

<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

[AlZuwaga]

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>

[webosiris]

Iniciado por Al Zuwaga

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

[JavierB]

Hola webosiris

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

/* esto es un comentario */

Saludos,

[AlZuwaga]

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 */

[webosiris]

Iniciado por Al Zuwaga

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)

[PatomaS]

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

[AlZuwaga]

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;
}
-->

[juanleonardo]

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

<style type="text/css">
img{opacity:0.5}
img:hover{opacity:1}
</style>

ASI

<style type="text/css">
<!--
img{opacity:0.5}
img:hover{opacity:1}
-->
</style>

Y ASI

<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.

[webosiris]

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

por oro lado:

Iniciado por juanleonardo

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)...