tout le monde !

J'aimerais créer une petite animation en javascript mais je ne maitrise pas encore très bien ce langage...

Je voulais vous demander si à partir du code source de cette page, vous pourriez m'indiquer quoi changer dans le script javascript afin que les rubriques s'ouvrent au survol de la souris (et non avec un clic) et que celles-ci se referment automatiquement lorsque la souris n'est plus sur une rubrique principale (là, il faut cliquer sur une autre pour qu'elles se referment).

Le lien de la page : http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu_demo.html

Je vais vous dire pourquoi je souhaiterais faire ça, comme ça si jamais vous connaitriez un code plus adapté...

En fait, sur le site, il y aura 4 photos et j'aimerais que lorsqu'on passe la souris sur une d'elles, une description apparaisse en fondu vers le bas et que dès que la souris n'est plus sur la photo, la description se ferme également en fondu...

d'avance pour vos réponses !

Remplaces : $("li.toggleSubMenu > a").click
par : $("li.toggleSubMenu > a").hover

deepblue Merci ça fonctionne lorsqu'on passe simplement la souris sur une rubrique mais par contre, lorsque la souris n'est plus sur la rubrique, elle ne se referme pas automatiquement.

Est-ce que tu saurais comment faire ça

Ouai, après coup, c'est super logique que ça réagisse comme ça ^^

http://wall.deblan.fr/x728/javascript/1/

Nickel, ça fonctionne parfaitement !!

Tu as juste inversé .hover & .mouseleave dans ton code mais sinon c'est extra !!

Merci beaucoup !

Petit HS mais c'est toi deepblue qui a créé www.deblan.fr

Si oui, bravo !! Je suis allé faire un tour sur le site, c'est impressionnant tout ce que tu peux faire dessus !

Est-ce que tout le monde peut poster des morceaux de codes sur ce site (sur wall.deblan.fr) ou alors c'est limité a quelques personnes

Oui c'est moi et oui tu peux ^^

re-salut tout le monde !

J'aurais encore besoin de votre aide pour faire mon animation en JS...

J'ai tenté de modifier le code posté plus haut toute la soirée de hier pour qu'il corresponde à mes attentes mais rien à faire, ça ne veut pas fonctionner...

Je vous indique de nouveau ce que je souhaite réaliser.

En fait, sur mon site, il y aura des visages en images.

Lorsqu'on passe la souris sur un de ces visages, j'aimerais qu'il y ai une description de la personne en question avec le reste de son corps, le tout apparaissant en fondu de la même manière que pour le menu que j'avais posté plus haut. (j'aimerais que le corps de la personne soit le fond du bloc qui contient la description)

Est-ce que quelqu'un pourrait m'indiquer un code qui pourrait faire cette animation

Je vous remercie d'avance pour votre aide !!

doc jquery : hover, mouseleave, fadeIn, fadeOut

le fondu marche correctement maintenant

Par contre, maintenant, un autre problème intervient :

Lorsqu'on passe la souris sur l'image, la description arrive correctement, lorsque la souris sort de l'image elle se retire comme je le voulais.

Maintenant, j'aimerais que lorsqu'on a passé la souris sur l'image et que la description est apparue, le fait de retirer la souris DE L'IMAGE pour aller sur LA DESCRIPTION ne ferme pas cette description.

En gros, j'aimerais que si on survole uniquement l'image, la description ne reste pas mais si on souhaite lire cette description, on ne soit pas obligé d'avoir la souris sur l'image mais on peut suivre le texte avec la souris dans le div de la description sans qu'il se referme...

J'ai essayé de mettre le même code que pour afficher la description lorsqu'on est sur l'image [en remplacant le .slideDown("slow") par .show()] mais ça ne fonctionne pas, le temps de passer la souris sur la description, celle-ci à déjà disparue...

Est-ce que vous pourriez m'indiquer comment je peux faire ça

Donne ton code html

Voilà :

<script>

$(document).ready(function(){

$(".image").hover( function () {
$(".description").slideDown("slow");
$(".description").show();
// On empêche le navigateur de suivre le lien :
return false;
});

});

$(document).ready(function(){

$(".description").hover( function () {
$(".description").show();
// On empêche le navigateur de suivre le lien :
return false;
});

});

$(document).ready(function(){

$(".image").mouseleave( function () {

$(".description").slideUp("slow");

// On empêche le navigateur de suivre le lien :
return false;
});
});

$(document).ready(function(){

$(".description").mouseleave( function () {

$(".description").slideUp("slow");

// On empêche le navigateur de suivre le lien :
return false;
});
});

</script>

html ;)

Oups, désolé...

En fait, mon code HTML est très vide car je fais juste un test pour voir si ça fonctionne afin de le mettre plus tard sur un site plus important...

Le voilà :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Essais javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script>

$(document).ready(function(){

$(".image").hover( function () {
$(".description").slideDown("slow");
$(".description").show();
// On empêche le navigateur de suivre le lien :
return false;
});

});

$(document).ready(function(){

$(".description").hover( function () {
$(".description").show();
// On empêche le navigateur de suivre le lien :
return false;
});

});

$(document).ready(function(){

$(".image").mouseleave( function () {

$(".description").slideUp("slow");

// On empêche le navigateur de suivre le lien :
return false;
});
});

$(document).ready(function(){

$(".description").mouseleave( function () {

$(".description").slideUp("slow");

// On empêche le navigateur de suivre le lien :
return false;
});
});

</script>

</head>
<body>

<p>
<img src="images/image1.png" alt="image1" class="image" />
</p>

<p class="description">
Description de l'image...
</p>

</body>
</html>

d'avance pour ton aide !

Re-salut tout le monde !

Est-ce que quelqu'un pourrait m'aider pour écrire le code à utiliser en javascript ?

d'avance pour vos réponses !

http://bordel.deblan.fr/html4/dexter.html

http://wall.deblan.fr/x752/html/1/

(mouarf, jquery-- mootools++ )

Cool, j'avais même pas vu que tu avais répondu !!

En fait, je ne comprends pas très bien le code...

Lorsqu'il y a deux variables $(".ensemble .description").hover( function () {
, est-ce que ça veut dire ".description CONTENU dans .ensemble" ou alors c'est ".description ET .ensemble"

J'aimerais modifier le code pour pouvoir en faire une sorte de menu déroulant :

<div id="menu">
<a href="page1.html"><img src="page1.jpg" alt="page1.jpg" /></a><a href="page2.html"><img src="page2.jpg" alt="page2.jpg" class="menu_deroulant"/></a>
</div>

<div class="details_menu_deroulant">
<p>Rubrique 1</p>
<p>Rubrique 2</p>
</div>

Il faudrait que je fasse comme ça

$(document).ready(function() {
$(".details_menu_deroulant").hide('fast');

$(".menu_deroulant").hover( function () {
$("#menu .details_menu_deroulant").slideDown("slow");
$("#menu .details_menu_deroulant").show();
// On empêche le navigateur de suivre le lien :
return false;
});

$("#menu .details_menu_deroulant").hover( function () {
$("#menu .details_menu_deroulant").show();
// On empêche le navigateur de suivre le lien :
return false;
});

$("#menu .menu_deroulant .details_menu_deroulant").mouseleave( function () {
$("#menu .details_menu_deroulant").slideUp("slow");
// On empêche le navigateur de suivre le lien :
return false;
});
});

Merci d'avance pour les réponses !

Si tu lis la doc, tu verras que ça fonctionne avec les sélecteurs CSS donc $(.truc .machin) c'est l'ensembles des éléments dont la class est "machin" contenu dans "truc".

Dit totalement ce que tu veux car c'est trop vague "une sorte de menu déroulant"...
et wall ton code : http://wall.deblan.fr IL n'est pas indenté sur jvc et tout le monde n'a pas d'extension pour le faire (vive greasemonley )

Suite au code que tu m'as donné plus haut, je souhaiterais pouvoir également m'en servir pour faire un menu déroulant pour un site que j'avais créé.

Le problème c'est que le menu de mon site est créé uniquement avec des images mises les unes à la suite des autres, et le détail du menu déroulant est dans un autre div placé directement après le div du menu.

Voilà le code HTML : http://wall.deblan.fr/x769/html/1/

J'espère que mon explication de ce que je souhaiterais sera assez compréhensible...

"(mouarf, jquery-- mootools++ ) "

je veux bien savoir pourquoi mootools est bien meilleur que JQuery???