problema con banner flash desplegable

[pulsar09]

Hola a todos, quiero poner en una web, un banner flash DESPLEGABLE, es decir que sea de 140 x 60px y al pasar el mouse por arriba este se agrande a uno de 300 x 100px. y que quede por encima del contenido de la web. como el que se puede ver en http://www.lanacion.com.ar (a la derecha de la empresa "Easy")

estuve viendo diferentes codigos pero no logro q me funcione, cuando ingreso el swf en la web me aparece todo el sobrante blanco del 300x100

si me pueden explicar que tiene que tener el FLA y que debo poner en el HTML o dentro de un DIV se los agradezco mucho.

Saludos
Alejandro

[bex]

Tenés que hacer dos flash distintos, uno para cada estado.

Hacés tu primer estado en un flash de 140x60 y tu segundo estado en otro flash de 300x100.
El primero lo ponés como corresponde en el lugar de la página donde lo querés, como cuando incluís cualquier swf común. Y al segundo lo colocás en un div, posicionado con position:absolute; (CSS) donde quieras que se vea una vez desplegado. A ese div con CSS le das display:none;.

Al primer swf (140x60) le decís que en mouse over o en click, ejecute una función Javascript que cambie el display del div a display:block;. De esa manera se hace visible. Al final del swf que se despliega (300x100) podés poner otra función Javascript que vuelva a display:none;.

Algo muy usado es poner el div que se hace visible por encima del banner original, así lo tapa.

Una alternativa al cambio del display, es hacerlo con AJAX y que la función javascript en vez de modificar el CSS incluya el código del banner flotante (300x100).

[bex]

Otra opción más simple.

Hacer todo en el mismo swf, que se expanada en el mismo archivo. Al object y al embed en el HTML les incluís el atributo wmode="transparent". Eso lo que logra es que el fondo del swf sea transparente. De esa manera, cuando el banner está retraído, aunque ocupe 300x100, sólo se ve el contenido de 140x60.

El problema de esto es que todo lo que esté por debajo de ese fondo transparente no va a ser clickeable, pero ciertamente es una técnica más simple de implementar.

[pulsar09]

Muchas gracias por las 2 alternativas que me das Bex, las estoy probando, luego publico los resultados.

[bex]

Por nada, si la implementación te causa problemas no dudes en preguntar!

[pulsar09]

No no hubo caso, entiendo tu explicación pero no logro hacer que funcione. Tengo conocimientos bastante limitados de Java y de Css, y estuve probando diferentes codigos que encontré pero ninguno me funciona.

En cada explicacion que encuentro, le cambian el nombre de las variables y el codigo que le ponen a los swf y a los Div y nb logro que funcionen.

por ejemplo estoy tomando este FLA que esta explicado en esta web: www.e-planning.net/es/soporte/expandible.html

pero despues no se que tengo que poner en el html
seria ideal poder ver un ejemplo completo, donde tengo el FLA o los 2 SWF donde se ve el codigo exacto que usan, y tambien ver el html donde está la forma en que colocan este banner desplegable.

[pulsar09]

dejo otras webs que estuve leyendo pero que nunca explican el problema de la implementacion en forma COMPLETA. Es decir, siempre o explican como debe estar armado el SWF expandible pero no su aplicacion en los DIV y viceversa.

http://www.joomlaspanish.org/foros/showthread.php?t=43851

http://www.e-planning.net/es/soporte/expandible.html

http://www.e-planning.net/es/productos/admagic/formatos/especificaciones/banner_expandible_rollover.html

http://www.domestika.org/foros/5-programacion_cliente/hilos/63169-ayuda_con_banner_expandible_en_flash

http://www.uolsinectis.com.ar/publicite/manual/index.htm?ayuda_expandible.htm

[bex]

Vamos a hacerlo más práctico.
Pasame tu URL de prueba y te ayudo paso a paso.

[pulsar09]

hola Bex te paso esta url que es la que estaba probando con una imagen de un boton, pero con los SWF no lo consigo y tampoco que uno quede por arriba del otro, se que se hace con Position Absolute pero no se bien como hacerlo:

http://www.dgenerador.com/bannerdiv/pruebadiv.html

y el codigo del flash que estoy usando es el mismo que el segundo de esta web:

http://www.e-planning.net/es/soporte/expandible.html

muchas gracias por tu tiempo
mi msn es [email protected]

[bex]

Bueno viene bien la cosa. Lo único que te falta es posicionar el div que aparece, por encima del original.

Vamos a hacer lo siguiente...

1. Creá los dos flash en los tamaños correspondientes y ubicalos en los divs correspondientes.
2. Al div #flotante metelo al final del div #mostrarDiv. O sea, que #flotante esté dentro de #mostrarDiv.
3. Al div #mostrarDiv agregale:
   
   Código CSS:

   position:relative;
    

4. Al div #flotante dejale lo que tiene y agregale:
   
   Código CSS:

   position:absolute;
   top:0;
   left:0;
    

Y eso es todo!

Cuando un elemento está posicionado de forma absoluta, usa left y top (o right y bottom) para posicionarse. Esas dos propiedades toman la esquina superior izquierda del primer elemento contenedor que tenga declarada la propiedad position, independientemente de su valor. Si no hay ningún contenedor con la propiedad declarada, simplemente toma la esquina superior izquierda del body.

En este caso le estamos diciendo a #flotante que se posicione a 0 px a la izq y a 0 px desde arriba de la esquina superior izquierda de #mostrarDiv, es decir que esté en la misma posición.

Avisame cuando lo tengas y vemos si salió bien!

[bex]

Otra cosa que sería bueno que hagas es sacar esos elementos <a> que ejecutan las funciones Javascript, y ponerlas directamente en los SWF's.

[pulsar09]

Gracias Bex! ahi luego de probar un poco logré que funcione, la dirección de como quedó la dejo para los que les pueda servir, asi copian el codigo:

http://www.dgenerador.com/bannerdiv/pruebadiv3flash.html

y la acción de los botones en las 2 películas Flash me quedaron asi:

en el flash cotraído:

on(rollOver){
var url = "javascript:mostrardiv(" + _root.bannerId + ");";
getURL(url);
}


y en el flash expandido:

on(rollOut){
var url = "javascript:cerrar(" + _root.bannerId + ");";
getURL(url);
}
on(release){
getURL(_root.clickTag, "_blank");
}


Muchas gracias por tu ayuda Bex!
Suerte.

[bex]

Que bueno que te haya sido útil!
Por nada y ya sabés, si necesitás ayuda por acá estaremos.
Saludos!