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 mike el 23 de Agosto de 2010
Por Daniel el 06 de Diciembre de 2011