|
|
·
Skindario
Buscar en el Foro Buscar Tags
Portal
Foro
Usuario
Foro
Normas
RSS
Etiquetas
Avatares
Rangos
Eventos
Staff
Entrevistas
Noticias
Caretos
F.A.Q
Subforos Privados
Estadisticas
Estadisticas
Usuarios
OnLine
Actividad
Funciones
Favoritos
P. Inicio
Imprimir
Buscar
Afiliados
¿Tu Web Aquí?
Comunidad ESDLA
Foros DWP
Websmasters Foro
Mundo Deluxe
Photosherox
Descargas-V
Enlázanos

i
Hacer una imagen "transparente"
 
Portal · Foros · Zona Webmasters · HTML, Javascript y CSS
Noticias · Buscar · Tags · Imágenes · Usuarios · Fisgona
Autor Mensaje 
Overlick
Webmaster Habitual
Webmaster Habitual


Mensajes: 41
Desde: 30/Ene/2007
#1 ·
Hacer una imagen "transparente"

Hola ¿Que tal?:

Estuve biendo por hay, y leí algo de hacer imagenes transparentes, creo que una bes lo vi en el foro, pero aun que lo he buscado, no lo eh encontrado.

¿Alguien me daría un script para hacer las imagenes transparentes? Por favor

05/Mar/2007 21:37 GMT+1
killer_78
Webmaster Javascript
Webmaster Javascript

Haz clic para ver el perfil del usuario
Mensajes: 380
Desde: 19/Mar/2006
#2 ·
RE: Hacer una imagen "transparente"

he de suponer que te refiers al script que hace de los PNG sean trasparentes en IE, para eso puedes revisar en el siguiente sitio

http://redvip.homelinux.net/varios/explorer-png.html



06/Mar/2007 04:53 GMT+1
Overlick
Webmaster Habitual
Webmaster Habitual


Mensajes: 41
Desde: 30/Ene/2007
#3 ·
RE: Hacer una imagen "transparente"

Tengo una duda...Ya consegui el script, es este:
Codigo


Y funciona bien, la imagen es tranparente, miren.

http://otaku-fusion.webcindario.com/habbo.htm

Use el menu que usan aquí, para que se vea bien el efecto y le apique el efecto a la imagen de fondo blanca como pueden ver. El problema es que si luego agrego cualquier imagen o texto a esa zona, tambien es transparente apesar de no llamar como dice el codigo, es decir, así:

<img src="Imagen.jpg" border="0" class="opacidad1"  onmouseout="this.className='opacidad1'">

¿Hay alguna forma de que las imagenes insertadas no sean transparente a ecepcion del fondo blanco?

Por cierto, hay un ejemplo en el menu #1, hay una imagen.

AYuda plis.

06/Mar/2007 19:16 GMT+1
killer_78
Webmaster Javascript
Webmaster Javascript

Haz clic para ver el perfil del usuario
Mensajes: 380
Desde: 19/Mar/2006
#4 ·
RE: Hacer una imagen "transparente"

si la imagen en el menu 1 es una carpeta azul, la veo perfectamente aun que esta un poco traslucida pero se ve, (OJO, utilizo normalmente FF 2.0) pero en IE7 se ve, ¿cual sería directamente tu duda?

si es hacerla menos traslucida revisa las css que estan dentro del script



07/Mar/2007 06:14 GMT+1
Overlick
Webmaster Habitual
Webmaster Habitual


Mensajes: 41
Desde: 30/Ene/2007
#5 ·
RE: Hacer una imagen "transparente"

Mi duda es que, yo le apliqué el efecto al fondo blanco del menu, pero, despues, cada imagen que agregago (En ese caso la carpeta azul) tambien es transparente y eso que no la llamo como dice en el script. Por lo tanto, no deberia de ser transparente.

07/Mar/2007 18:31 GMT+1
killer_78
Webmaster Javascript
Webmaster Javascript

Haz clic para ver el perfil del usuario
Mensajes: 380
Desde: 19/Mar/2006
#6 ·
RE: Hacer una imagen "transparente"

postea el codigo que has usado, de preferencia completo para poder evaluarlo



09/Mar/2007 03:42 GMT+1
Overlick
Webmaster Habitual
Webmaster Habitual


Mensajes: 41
Desde: 30/Ene/2007
#7 ·
RE: Hacer una imagen "transparente"

Lo puse arriba y si quiero verlo completo, mira el codigo fuente del ejemplo que dejé.

09/Mar/2007 06:42 GMT+1
Overlick
Webmaster Habitual
Webmaster Habitual


Mensajes: 41
Desde: 30/Ene/2007
#8 ·
RE: Hacer una imagen "transparente"

EffectedCard, me ayudas por favor

18/Mar/2007 01:42 GMT+1
EffectedCard
Administrador
Administrador

Haz clic para ver el perfil del usuario

Usuario PRO Usuario PRO
Mensajes: 9.272
Desde: 16/Oct/2004
#9 ·
RE: Hacer una imagen "transparente"

Sinceramente... no entiendo cual es el problema aunque he mirado eso.

Para la opacidad (transparencia) se usa el css, pero es distinto para firefox que para IE

http://www.manualdecss.com/codigos-css/transparencia-css.html

18/Mar/2007 15:12 GMT+1
Overlick
Webmaster Habitual
Webmaster Habitual


Mensajes: 41
Desde: 30/Ene/2007
#10 ·
RE: Hacer una imagen "transparente"

Hay en el ejemplo de la pagina que me diste aparece...

Apesar de que le aplico el efecto a una imagen de fondo de una tabla...Todo lo que ponga, (letras, imagenes, etc) tambien es transparente.

¿Se entiende?

23/Mar/2007 00:26 GMT+1
killer_78
Webmaster Javascript
Webmaster Javascript

Haz clic para ver el perfil del usuario
Mensajes: 380
Desde: 19/Mar/2006
#11 ·
RE: Hacer una imagen "transparente"

tal como dice effected, debes aplicar el css correcto toma en cuenta que no todos los navegadores son iguales, por lo que tendrás que usar las css para cada evento, es decir cuando sea cargada en IE en FF o en otro. Si usas una sola especificacion CSS se verá mal en los demas navegadores.



23/Mar/2007 05:27 GMT+1
hidabe
Nuevo Webmaster
Nuevo Webmaster

Haz clic para ver el perfil del usuario
Mensajes: 4
Desde: 23/Abr/2007
#12 ·
RE: Hacer una imagen "transparente"

Yo tengo el mismo problema que Overlick, y es el siguiente:

Imaginad, para simplificar, que trabajamos sólo con IE y tengo este código:

CSS:
#contenido {
  filter: alpha(opacity=50);
}
#contenido p {
}

HTML:
<div id="contenido">
  <p>Este es mi texto</p>
</div>

Me saldrá el texto también con transparencia y eso es lo que ni Overlick ni yo queremos :)

Recuerdo que hace tiempo estuve buscando sobre transparencias en la red, y en la web que encontré explicaba como quitar el efecto de transparencia para algunas partes del contenedor donde se aplicaba, porque normalmente es lo que se hace para que el texto no salga transparente; pero llevo media hora buscando y no encuentro ningún otro ejemplo donde lo explique :(

23/Abr/2007 19:06 GMT+1
hidabe
Nuevo Webmaster
Nuevo Webmaster

Haz clic para ver el perfil del usuario
Mensajes: 4
Desde: 23/Abr/2007
#13 ·
RE: Hacer una imagen "transparente"

Bueno, yo encontré una solución al menos para mi caso ya que uso dimensiones estáticas y posiciones absolutas, no sé si a ti te servirá...

El caso es definir dos veces la misma zona, la primera vez haremos que se efectúe el efecto de transparencia, y la segunda la usaremos para meter nuestro texto, imágenes, etc no transparente.

En mi caso, ahora tengo (sólo para IE en el ejemplo):

CSS:
#opac {
  filter: alpha(opacity=50);
  opacity: .5;
  position: absolute;
  left: 5%;
  right: 5%;
  height: 300px;
  bottom: 4px;
}

#contenido {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 300px;
  bottom: 4px;
}

En el HTML:
<div id="opac">
   Si queremos que algo salga también transparente, lo pondremos aquí.
</div>
<div id="contenido">
   Aquí pondremos lo que queramos que no salga transparente.

</div>

Y ya está, así en la misma zona tenemos opción de poner transparencia o no. En mi caso, puse transparencia para el fondo y el texto lo dejé sin ella, porque sino no se ve :)

Espero que te sirva Overlick, un saludo.

23/Abr/2007 19:21 GMT+1
hidabe
Nuevo Webmaster
Nuevo Webmaster

Haz clic para ver el perfil del usuario
Mensajes: 4
Desde: 23/Abr/2007
#14 ·
RE: Hacer una imagen "transparente"

Se me olvidó probarlo en IE, sólo funciona en FireFox, así que no nos sirve de nada :)

Sigo buscando... jeje

23/Abr/2007 19:23 GMT+1
hidabe
Nuevo Webmaster
Nuevo Webmaster

Haz clic para ver el perfil del usuario
Mensajes: 4
Desde: 23/Abr/2007
#15 ·
RE: Hacer una imagen "transparente"

Otra vez yo :)

Ya he descubierto porqué no funciona en IE, el caso es que no toma bien el width al aplicar dos capas en el mismo lugar o al aplicar la transparencia. Sea por lo que fuere, debemos, por tanto, establecer un width si queremos que el ejemplo que puse vaya bien en IE.

Pero bueno, aún así esta solución no nos vale si nuestro contenedor tiene que ser de posición relativa, en mi caso, como no es así, me va bien.

Podéis verlo en www.sopinet.com/elmolino aunque estoy haciendo pruebas, y no sé si mantendré las transparencias.

Un saludo.

23/Abr/2007 20:50 GMT+1
Haz clic para ir al tema anterior Haz clic para ir al tema siguiente
Portal · Foros · Zona Webmasters · HTML, Javascript y CSS
Temas similares
Asunto Autor#VisitasÚltima respuesta
Quisiera que aparezca una imagen al poner el mouse sobre un link31/Oct/2008, 16:25
Ningenin
 2 7201/Nov/2008, 16:17
Ningenin Ir al último mensaje del tema
Protejer imagen vinculada12/Abr/2008, 10:07
remus0000
 4 18712/Abr/2008, 20:47
Darth_Carl Ir al último mensaje del tema
Efecto cambiar imagen al pasar el cursor28/Oct/2007, 16:57
baggiobanglio
 2 1.23829/Oct/2007, 19:32
baggiobanglio Ir al último mensaje del tema
Quiero hacer un scrollbar con imagen de fondo05/Sep/2007, 01:23
k_nelita
 2 56505/Sep/2007, 01:51
k_nelita Ir al último mensaje del tema
Imagen Aleatoria Duda - No biblioteca23/Jun/2007, 22:19
Counteraddict
 4 22324/Jun/2007, 18:58
EffectedCard Ir al último mensaje del tema
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  

TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Todas las fechas y horas son GMT+1. Ahora son las 17:18

Afiliados Plus
Skindario - Soporte Webmasters, Diseño Grafico, Miarroba, Rol + RPG y Mucho Mas TuarrobaGames - Emuladores, Roms, Juegos y RPG TuarrobaEbooks - Ebooks en castellano y Audiolibros Websmasters foro MundoDeluxe Photosherox - Diseñando & Aprendiendo
¿Tu Web Aquí?
Admin: EffectedCard - Skindario, foro soporte de Tuarroba desde el 16/10/04