Foros del Web » Programando para Internet » Javascript »

Tranparecia de imágenes

 Estas en el tema de Tranparecia de imágenes en el foro de Javascript en Foros del Web. Hola. Quiero que cada vez que se abra la página web entre una imágen 1.jpg y despues por segundo pase a otra imagen, sin Flash ...
  #1 (permalink)  
Antiguo 27/05/2011, 13:37
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 374
Antigüedad: 15 años, 10 meses
Puntos: 1
Tranparecia de imágenes
Hola.

Quiero que cada vez que se abra la página web entre una imágen 1.jpg y despues por segundo pase a otra imagen, sin Flash y que cuando entre esa imágen pase a otra imagen por otro segundo unas cuatro imágenes distintas que lo hago de forma de tranparencia como la opcion de alfa, quiero decir que pase de imagen invisible y que vaya parecido poco a poco, mediante programación en PHP o Javascripct.

Asesorarme un poco de ayuda.
__________________
Cada día se aprende algo nuevo
  #2 (permalink)  
Antiguo 27/05/2011, 14:12
Avatar de stramin  
Fecha de Ingreso: marzo-2008
Ubicación: Cubil felino
Mensajes: 1.652
Antigüedad: 16 años, 1 mes
Puntos: 336
Respuesta: Tranparecia de imágenes
se hace con Javascript y CSS

usa setTimeout(); para hacer el progreso de tiempo

con CSS puedes elegir la transparencia, pero debes especificar para todos los navegadores (mozila, iexplorer y safari tienen formas distintas de hacerlo)

para poner las imagenes sobre la pagina usa capas (no es dificil, es solo un estilo (position:abolute;))

te recomiendo que preguntes en el foro de Javascript para hacer la secuencia y luego en CSS para lograr los efectos.
__________________
El objetivo de este foro es orientar al usuario como un favor y no como una obligación.

Yo soy de los que dan puntos por aporte :D
  #3 (permalink)  
Antiguo 27/05/2011, 14:53
Avatar de scorpion3d  
Fecha de Ingreso: mayo-2011
Mensajes: 92
Antigüedad: 12 años, 11 meses
Puntos: 19
Respuesta: Tranparecia de imágenes
Usa este codigo solo debes cambiar la ruta de las imagenes y buala:

<script language="javascript">

var imagenes=new Array()

imagenes[0]=new Image (380,288);
imagenes[0].src="Imagenes/imagen1.png"
imagenes[1]=new Image (380,288);
imagenes[1].src="Imagenes/imagen2.png"
imagenes[2]=new Image (380,288);
imagenes[2].src="Imagenes/imagen3.png"
imagenes[3]=new Image (380,288);
imagenes[3].src="Imagenes/imagen4.jpg"

cont=0
function presImagen()
{
if (document.all){
document.getElementById('foto').filters.blendTrans .apply()
document.getElementById('foto').src=imagenes[cont].src
document.getElementById('foto').filters.blendTrans .play()
}
else
{
document.images.foto.src = imagenes[cont].src
}
if (cont < imagenes.length-1)
{cont ++}
else
{cont=0}
tiempo=window.setTimeout('presImagen()',5000)
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="presImagen()">
<img id="foto" src="tibidabo.jpg" style="filter:blendTrans(duration=3)">
</body>
__________________
www.elias.com.sv
  #4 (permalink)  
Antiguo 28/05/2011, 13:55
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 374
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Tranparecia de imágenes
Cita:
Iniciado por scorpion3d Ver Mensaje
Usa este codigo solo debes cambiar la ruta de las imagenes y buala:

<script language="javascript">

var imagenes=new Array()

imagenes[0]=new Image (380,288);
imagenes[0].src="Imagenes/imagen1.png"
imagenes[1]=new Image (380,288);
imagenes[1].src="Imagenes/imagen2.png"
imagenes[2]=new Image (380,288);
imagenes[2].src="Imagenes/imagen3.png"
imagenes[3]=new Image (380,288);
imagenes[3].src="Imagenes/imagen4.jpg"

cont=0
function presImagen()
{
if (document.all){
document.getElementById('foto').filters.blendTrans .apply()
document.getElementById('foto').src=imagenes[cont].src
document.getElementById('foto').filters.blendTrans .play()
}
else
{
document.images.foto.src = imagenes[cont].src
}
if (cont < imagenes.length-1)
{cont ++}
else
{cont=0}
tiempo=window.setTimeout('presImagen()',5000)
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="presImagen()">
<img id="foto" src="tibidabo.jpg" style="filter:blendTrans(duration=3)">
</body>
Muchas gracias me funciona perfectamente, pero al principio aparece como una imagen x hasta que aparece la foto al 100%.

¿Como hago que la foto primera aparezca bien y luego que se vaya intercalando las imagenes?

Muchas gracias te mereces un voto.

Saludos.
__________________
Cada día se aprende algo nuevo
Última edición por TIFORO; 28/05/2011 a las 14:03
  #5 (permalink)  
Antiguo 30/05/2011, 12:06
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 374
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Tranparecia de imágenes
Hola.


¿Como lo hago para todos los navegadores se vea igual, me puedes dar una pista?

Cita:
Iniciado por stramin Ver Mensaje
se hace con Javascript y CSS

usa setTimeout(); para hacer el progreso de tiempo

con CSS puedes elegir la transparencia, pero debes especificar para todos los navegadores (mozila, iexplorer y safari tienen formas distintas de hacerlo)

para poner las imagenes sobre la pagina usa capas (no es dificil, es solo un estilo (position:abolute;))

te recomiendo que preguntes en el foro de Javascript para hacer la secuencia y luego en CSS para lograr los efectos.
__________________
Cada día se aprende algo nuevo
  #6 (permalink)  
Antiguo 30/05/2011, 12:24
Avatar de stramin  
Fecha de Ingreso: marzo-2008
Ubicación: Cubil felino
Mensajes: 1.652
Antigüedad: 16 años, 1 mes
Puntos: 336
Respuesta: Tranparecia de imágenes
no es nada divertido, cada navegador tiene su propia funcion CSS, por lo general tiene un prefijo:

-moz : mozila
-ms : Microsoft
-o : opera
-webkit : webkit

un ejemplo de gradiante vertical:
Código CSS: 
Ver original
  1. /* For WebKit */  
  2.  background: -webkit-gradient(linear, left top, left bottombottom, from(rgba(255,0,0,1)), to(rgba(0,0,255,.25)));  
  3. /* For Mozilla */  
  4.  background: -moz-linear-gradient(top, rgba(255,0,0,1), rgba(0,0,255,.25));  
  5. /* For lt IE8 */  
  6.  filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,  
  7. startColorstr='#88ff0000', endColorstr='#3300ff00');

un ejemplo para crear sombras:
Código CSS: 
Ver original
  1. margin: 40px;
  2. background-color: rgb(68,68,68); /* Needed for IEs */
  3. -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  4. -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  5. box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  6. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  7. -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  8. zoom: 1;

girando en 180 grados:
Código CSS: 
Ver original
  1. -webkit-transform: rotate(180deg) ; /* los valores van desde el 0 al 360 */
  2. -moz-transform: rotate(180deg) ;
  3. -o-transform: rotate(180deg) ;

como verás, Firefox posee mas filtros y webkit le sigue, mientras que IExplorer y Opera se quedan atrás.

Safari, Chrome, iPhone, iPad, Android, etc. son Webkit
__________________
El objetivo de este foro es orientar al usuario como un favor y no como una obligación.

Yo soy de los que dan puntos por aporte :D
  #7 (permalink)  
Antiguo 02/06/2011, 03:04
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 374
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Tranparecia de imágenes
Estoy probando este codigo en mi hoja de estilos CSS y no me funciona para el mozilla.

Cita:
Iniciado por stramin Ver Mensaje
no es nada divertido, cada navegador tiene su propia funcion CSS, por lo general tiene un prefijo:

-moz : mozila
-ms : Microsoft
-o : opera
-webkit : webkit

un ejemplo de gradiante vertical:
Código CSS: 
Ver original
  1. /* For WebKit */  
  2.  background: -webkit-gradient(linear, left top, left bottombottom, from(rgba(255,0,0,1)), to(rgba(0,0,255,.25)));  
  3. /* For Mozilla */  
  4.  background: -moz-linear-gradient(top, rgba(255,0,0,1), rgba(0,0,255,.25));  
  5. /* For lt IE8 */  
  6.  filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,  
  7. startColorstr='#88ff0000', endColorstr='#3300ff00');

un ejemplo para crear sombras:
Código CSS: 
Ver original
  1. margin: 40px;
  2. background-color: rgb(68,68,68); /* Needed for IEs */
  3. -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  4. -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  5. box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  6. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  7. -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  8. zoom: 1;

girando en 180 grados:
Código CSS: 
Ver original
  1. -webkit-transform: rotate(180deg) ; /* los valores van desde el 0 al 360 */
  2. -moz-transform: rotate(180deg) ;
  3. -o-transform: rotate(180deg) ;

como verás, Firefox posee mas filtros y webkit le sigue, mientras que IExplorer y Opera se quedan atrás.

Safari, Chrome, iPhone, iPad, Android, etc. son Webkit
__________________
Cada día se aprende algo nuevo
  #8 (permalink)  
Antiguo 02/06/2011, 07:17
Avatar de stramin  
Fecha de Ingreso: marzo-2008
Ubicación: Cubil felino
Mensajes: 1.652
Antigüedad: 16 años, 1 mes
Puntos: 336
Respuesta: Tranparecia de imágenes
cual código exactamente? los 3?
__________________
El objetivo de este foro es orientar al usuario como un favor y no como una obligación.

Yo soy de los que dan puntos por aporte :D
  #9 (permalink)  
Antiguo 03/06/2011, 09:26
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 374
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Tranparecia de imágenes
Estuve probando el de arriba, pero en mozilla no me hace el efecto de la tranparencia como en el navegador Internet Explorer.

No se como insertalo en CSS.

Sera algo asi .{estilo}
__________________
Cada día se aprende algo nuevo
  #10 (permalink)  
Antiguo 03/06/2011, 13:14
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 5 meses
Puntos: 87
Respuesta: Tranparecia de imágenes
Lo estan intentando hacer con Javascript/css puro; y mientras se aprecia el esfuerzo... mejor usen jQuery si no se quieren matar la cabeza. Transparencia (jQuery solo):

Código Javascript: 
Ver original
  1. $("#div").css("opacity",0.5)
usando el plugin rotation

Código Javascript: 
Ver original
  1. $("#div").rotate(45);
Bordes redondeados (corner plugin)
Código Javascript: 
Ver original
  1. $("#div").corner("20px");
Sombra (shadow plugin)

Código Javascript: 
Ver original
  1. $("#div").shadow({ color: "#999", offset: 5, opacity: 0.2 });




Tengo que advertir que hacerlo con jQuery y plugins representa aprox. 200 milisegundos (dos decimas parte de un segundo) mas lentitud a la hora de procesarlo; pero si esto no representa un problema para vuestra aplicación lo mejor es usarlo.

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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:36.