Foros del Web » Creando para Internet » CSS »

Mostrar imágenes con efecto

Estas en el tema de Mostrar imágenes con efecto en el foro de CSS en Foros del Web. Hola a todos: A ver si esto se puede hacer y como Teniendo la típica ficha de producto para mostrar sus características varias, se dispone ...
  #1 (permalink)  
Antiguo 22/02/2006, 05:44
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
Mostrar imágenes con efecto

Hola a todos:

A ver si esto se puede hacer y como

Teniendo la típica ficha de producto para mostrar sus características varias, se dispone igualmente de un vínculo que abre una ventana para mostrar imágenes del producto (el vínculo estará activo siempre que el producto tenga imágenes).

Entonces en la ventana de las imágenes, éstas estarían dispuestas como en dos marcos:
de inicio se muestra una de las imágenes y las demás estarían dispuestas en una fila ó una columna con tamaño más pequeño.
Luego cada vez que se hiciera clic ó pasar por encima de una de las imágenes pequeñas, pasaría a ocupar ó a verse en el espacio grande.
La cuestión principal es que quisiera que el paso de una imagen a otra se hiciera a través de un efecto de transición como un fundido por ejemplo.

Espero que se haya comprendido más ó menos

¿Cómo se haría todo esto? ¿vale para este caso lo de los filtros "revealTrans(Duration=0.7,Transition=21)";?

¿Cómo se aplicaría en el vínculo de cada imagen?

Creo que los estilos sobre filtros para determinados navegadores no funcionan ó no se llaman igual ó lo que sea...
¿sería compatible tanto para el I.Explorer cómo para Mozilla?

Espero y agradezco respuestas

Saludos,

zacktagnan.
=============================================
  #2 (permalink)  
Antiguo 23/02/2006, 01:44
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
¿Es algo que no se puede hacer? ¿No sabe nadie cómo hacerlo?

Saludos,

zacktagnan.
=========================================
  #3 (permalink)  
Antiguo 23/02/2006, 03:33
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 20 años, 3 meses
Puntos: 13
¿Tu estas seguro que eso se hace con CSS?
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #4 (permalink)  
Antiguo 23/02/2006, 06:38
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
Esa es una de las cuestiones que creo haber planteado. Si se puede hacer ó no.
Igual es con javascript.

Otras ves cuando el tema no está en el foro apropiado, los moderadores ó quien sea lo mueve al lugar apropiado.

No obstante si que hay un estilo llamado filter ¿no?

Saludos,

zacktagnan.
======================================
  #5 (permalink)  
Antiguo 23/02/2006, 06:47
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Hola zacktagnan

He encontrado por ahí un mensaje que podría servirte:

http://www.forosdelweb.com/showthrea...oto=nextnewest

Saludos,
  #6 (permalink)  
Antiguo 23/02/2006, 10:33
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Hola todos :

Agrego un par de enlaces más

redymension problematica

Función "opacity"

www.pepemolina.com/imagenes/index.html
  #7 (permalink)  
Antiguo 24/02/2006, 07:05
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
Vale, trataré de revisar todo esto...

Saludos,

zacktagnan.
==============================================
  #8 (permalink)  
Antiguo 25/02/2006, 05:52
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
A ver furoya:

El script que pusiste en este tema es justo lo que quería, la pena que sólo funciona en Internet Explorer y no en otros:

Código:
<HTML>
<HEAD>
<SCRIPT>
var foto=new Array()
foto[0]=new Image()
foto[0].src=
"http://www.forosdelweb.com/images/smilies/adios.gif"
foto[1]=new Image()
foto[1].src=
"http://www.forosdelweb.com/images/home.gif"
foto[2]=new Image()
foto[2].src=
"http://www.forosdelweb.com/images/a/header_calendario.gif"
foto[3]=new Image()
foto[3].src=
"http://www.forosdelweb.com/images/a/logo_header.gif"
</SCRIPT>
<SCRIPT>
var tamanio;

function cambiar(im){
cont.filters.revealTrans.apply();
if(foto[im].width>foto[im].height){
tamanio=" width=300";};
else {tamanio=" height=300"};
v0.value=foto[im].width;
v1.value=foto[im].height;
nuevoCont="<table border=0 width=302 height=302 cellspacing=0>"+
"<td align=center><img src="+foto[im].src+tamanio+"></td></table>";
cont.innerHTML=nuevoCont;
cont.filters.revealTrans.play();
}

</SCRIPT>
</HEAD>
<BODY>
<center>
<div id=cont style="filter:revealTrans(transition=12 , duration=4); 
width:310px; height:310px; background:
url('http://www.forosdelweb.com/images/a/right_bottom.gif')">
</div>
<p>
<input /*onclick="cambiar(0)"*/ onmouseover="cambiar(0)" height=30 type=image src=
"http://www.forosdelweb.com/images/smilies/adios.gif">
<input /*onclick="cambiar(1)"*/ onmouseover="cambiar(1)" height=30 type=image src=
"http://www.forosdelweb.com/images/home.gif">
<input /*onclick="cambiar(2)"*/ onmouseover="cambiar(2)" height=30 type=image src=
"http://www.forosdelweb.com/images/a/header_calendario.gif">
<input /*onclick="cambiar(3)"*/ onmouseover="cambiar(3)" height=30 type=image src=
"http://www.forosdelweb.com/images/a/logo_header.gif">
 _ Ancho original : <input id=v0 size=4> _ 
Alto original : <input id=v1 size=4>
</center>

</BODY>
</HTML>
Comentabas también que el filtro "revealTrans(transition=12 , duration=4)" funcionaba sólo en Internet Explorer. Y que era mejor usar el filtro alpha con opacidad.

No he llegado a comprender cómo se hace para usar eso.

Yo he intentado en poner el filtro "alpha" en vez del "revealTrans", sustituyendo uno por otro tanto en los "script" como en el "div":

Código:
function cambiar(im){
cont.filters.alpha.apply();
...
cont.filters.alpha.play();

...

<div id=cont style="filter:alpha(opacity=0.5); 
width:310px; height:310px; background:
url('http://www.forosdelweb.com/images/a/right_bottom.gif')">
</div>
Aunque de esta forma, a no ser que lo haga mal, me quedo sin el efecto de transición.
Luego, ¿cómo hay que adaptar el código para que el efecto de transición funcione tanto en el Internet Explorer como en otros como el Netscape ó Firefox?

He visto que para estos últimos, se usa el "-moz-opacity:1;" (de 0 a 1) pero tampoco sé como se usa ó se le llama después de configurarlo dentro de un estilo.

¿Una ayudita con la modificación?

Saludos,

zacktagnan.
================================================== ========
  #9 (permalink)  
Antiguo 25/02/2006, 05:59
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
En el realizado por caricatos

http://www.pepemolina.com/imagenes/index.html

lo hace bien tanto para internet Explorer como en otros navegadores, pero no localizo ó no sé lo que hace y lo que aplica en vez del revealTrans para los casos en los que el navegador no es el mencionado.

Saludos,

zacktagnan.
==============================================
  #10 (permalink)  
Antiguo 25/02/2006, 09:10
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola zacktagnan:

La verdad es que había visto el mensaje, pero no me había dado cuenta de lo que querías... la verdad es que para mi, es efecto fundido... o tale vez me hubiera enterado si hablases de opacidad, pero no importa, creo que ahora lo entiendo mejor...

En el mensaje que puso furoya sobre opacidad creo que se entiende bien... de todos modos te explicaré como funciona, pero al menos opera no lo implementa...

Se trata de tener 2 imagenes superpuestas y la visible (la superior) ir atenuando la opacidad hasta volverla transparente... en explorer se trata de usar el filtro alpha.opacity (entre 0 y 100) y en mozilla el estilo -moz-opacity (y en las últimas versiones solo opacity) entre 0 y uno (con valores reales)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 26/02/2006, 18:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Hola de nuevo :

Veamos con ésto

Opacidad de una capa

Efecto 'enfoque' con cambio de opacidad
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 16:40.