Ha tenido cierto auge aquellos banners en donde al pulsar o poner el cursor encima se expande, adobe ofrece una alternativa y otros han desarrollado su propia solución a esta inquietud, en esta oportunidad quiero dejarles una sencilla solución utilizando Jquery y su funcionalidad, que no sólo podemos utilizar para banners.
Iniciamos insertando el swf en nuestro HTML dentro de un DIV que lo contenga:
Código :
<div id="expande" style="width:990px; height:30px; border:1px solid black;"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%"> <param name="movie" value="banner.swf" /><param name="quality" value="high" /><param name="salign" value="T" /><param name="scale" value="noscale" /> <embed src="banner.swf" quality=high scale=noscale bgcolor=#FFFFFF width="100%" height="100%" name="banner" salign="T" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> </div>
IMPORTANTE: Se deben configurar los siguientes parámetros:
- scale noscale // para mantener fijo el tamaño del swf
- salign T //para mantener la alineación en la parte superior.
- La medida del DIV contenedor son las medidas con las que se presenta el swf inicialmente.
Luego de referenciar jquery:
Código :
<script type="text/javascript" src="jquery.js"></script>
Creamos dos funciones cada una para las acciones que deseemos realizar, en este caso Expandir y Contraer, estas funciones usan la alternativa de modificación de estilo que nos brinda Jquery.
Código :
function expandir() { $('#expande').css( {height:200} ); } function contraer() { $('#expande').css( {height:30} ); }
En donde se determina el DIV que contiene nuestro swf, el alto a expandirse y contraerse.
Por último en el flash creamos un botón que cubre toda el área del stage, el cual bautizamos "creativamente" como la instancia: botón
Invocamos las funciones de javascript creadas segun el estado del cursor:
Código :
boton.onRollOver = function() { getURL("javascript:expandir()"); } boton.onRollOut = function() { getURL("javascript:contraer()"); }
Y listo desde el swf y gracias a Jquery podemos modificar la dimensión de exposición.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Zguillez el 03 de Junio de 2009
Por Juanlu_001 el 03 de Junio de 2009
Por mike el 23 de Agosto de 2010
Por Daniel el 06 de Diciembre de 2011