DanGrecks ~ ¡Ayuda WebMaster!

Chat con efecto deslizante

En este tutorial, pondremos un Chat con efecto que aparece deslizante al poner el cursor encima donde dice "Chat en Linea", [ Ver Ejemplo ]. Ya dicho esto, empezaremos con el tutorial.

Primero necesitamos tener la libreria jQuery 1.4.2 activada, para ello insertaremos este codigo en "Texto Sobre el Diseño":

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Ya teniendo la libreria jQuery activada, usaremos este Script, que al igual lo pegaremos en "Texto Sobre el Diseño" (El Script no ocupa modificaciones): 
<script type="text/javascript"> //<![CDATA[ var j = jQuery.noConflict(); j(function (){ j(".esthela").hover(function(){ j(".esthela").stop(true, false).animate({left:"0"},"medium"); },function(){ j(".esthela").stop(true, false).animate({left:"-400"},"medium"); },500); return false; }); //]]> </script> <style type="text/css"> /*<![CDATA[*/ .esthela { float:left; width:450px; height:490px; background: url(https://img.webme.com/pic/d/dangrecks/fondochat.png) no-repeat !important; display:block; left: -400px; padding:0; position:fixed; top: 56px; z-index:1002; } /*]]>*/ </style> <div class="esthela" style="left: -400px;"> <br /> <embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="400" height="300" name="chat" flashvars="id=202887580" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml"></embed></script>