Primero les paso el código
Tengo este div en index.php:
Código HTML:
<div class="banner-container-left"> <div class="banner-header"> <div class="banner-left"> <?php //include('lateral.php'); ?> </div> </div> </div>
Tiene un evento asociado dentro del mismo index.php, con Jquery.
Código HTML:
<script language="JavaScript" type="text/javascript"> jQuery("div.banner-header").mouseenter(function(){ var ancho = 500; if(jQuery(this).children("div").attr("class") == "banner-left") { ancho = 475; } jQuery(this).children("div").animate({width: ancho}, 300); jQuery(this).load("lateral.php", {id: 1}, function(){ }); }); jQuery("div.banner-header").mouseleave(function(){ jQuery(this).children("div").animate({width: 0}, 300); //jQuery(this).unload("lateral.php", {id: 1}, function(){ //)}; }); </script>
Código HTML:
<body> <OBJECT id="banner_lateral" codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width="475" height="250"> <PARAM NAME="FlashVars" VALUE="12382"> <PARAM NAME="Movie" VALUE="swf/teledoce-com.swf"> <PARAM NAME="Src" VALUE="swf/teledoce-com.swf"> <PARAM NAME="Quality" VALUE="High"> <PARAM NAME="AllowScriptAccess" VALUE="always"> <PARAM NAME="Scale" VALUE="ShowAll"> <EMBED src="swf/teledoce-com.swf" quality="high" width="475" height="250" NAME="banner_lateral" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT> </body>
El problema es q si se fijan en el código Jquery, yo lo que estaría necesitando es que una vez que el usuario saca el mouse de encima del div, deje de reproducir. Es decir, algo así como deseche el contenido que cargo de lateral.php.
Alguien tiene una idea de como puedo hacer eso?
Además de lo que digo, también me pasa que no me muestra bien el efecto, es decir, es como que el flash aparece de repente, cuando si dejo de cargarle "lateral.php" si me lo muestra con movimiento, es decir, el div aparece desde el lado hacia el medio. (cambio el atributo "width" del mismo).
Gracias de antemano!
Saludos!
P.S.: por si acaso este es el css para ese banner
.banner-container-left
{
position: fixed;
top: 20%;
left: 0%;
padding: 0;
z-index: 50;
}
div.banner-header
{
background: url("img/banner_header_left.png") no-repeat top left;
width: 30px;
height: 275px;
padding: 0;
}
.banner-left
{
background: url("img/banner-grande.png") no-repeat top right;
width: 0px;
height: 275px;
margin-left: 26px;
float: left;
}