11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLUT] SlideToggle au survol

Bonjour,

Voila dans ma découverte, et l'utilisation de Js, je souhaiterait avoir 2div.
Dont l'une est invisible de base, et se déroule au survol de l'autre div.
J'ai coder quelque chose mais ca ne fonctionne pas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <script type="text/javascript" src="jq/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
//<![CDATA[
$(document).ready(function()
{
  $('#full_panier').slideToggle("fast");    

  $('#tete_panier').onmouseover (function()
  {
    $('#full_panier').slideToggle("slow")
  });
  $('#tete_panier').onmouseout (function()
  {
    $('#full_panier').slideToggle("slow")
  });
});
    //]]>
    </script>
  </head>
  <body>
    <div id="tete_panier" style="background-color:#f00;width:200px">tete</div>
    <div id="full_panier" style="background-color:#555;width:200px">panier<br/>panier<br/>panier<br/>panier<br/></div>
  </body>
</html>


Voyez vous une erreur?
Merci d'avance. Smiley biggrin
Modifié par gotcha5832 (03 Apr 2011 - 13:03)
J'ai modifié mon code.
Je connais toujorus pas mon erreur mais j'ai trouvé un autre moyen de le faire.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <title></title> 
    <script type="text/javascript" src="jq/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() {
// cacher la boxe
$('#full_panier').hide();    

    function slide() {
      $('#full_panier').slideToggle("slow");
      $(this).toggleClass("active");
      return false;
    }

    $('#tete_panier').hover(slide, slide);
}); 
    //]]> 
    </script> 
  </head> 
  <body> 
    <div id="tete_panier" style="background-color:#f00;width:200px">tete</div> 
    <div id="full_panier" style="background-color:#555;width:200px">panier<br/>panier<br/>panier<br/>panier<br/></div> 
  </body> 
</html>
Sujet clos
Aller à