onmouseover et fade avec jquery

**Valfye** · 03/11/2012, 16h13

Bonjour, je suis en train de faire un site en ce moment et j'avais une idée de design qui me semblais pas mal. Je m'explique.

En gros j'ai un menu horizontal, a chaque fois que ma souris passe sur un élément du menu (exemple: accueil), ceci affiche sur autre div, une image (Une maison pour reprendre l'exemple précédemment cité). Cette image disparaîtrait une fois en dehors de l’élément concerné. Je me suis dit qu'avec jquery et un onmouseover accompagné d'un onmouseout ceci serai parfaitement faisable. Hors ceci ne marche pas.

Voici le code exemple que j'utilise:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        <script type="text/javascript" src="Js/jquery.js"></script>
    </head>
    <div style="background: blue; width: 100px; height: 100px; float: left;"></div>
    <div style="background: red; width: 100px; height: 100px; float: left;"></div>
    <div style="background: black; width: 100px; height: 100px; float: left;" onmouseover="document.getElementById('jaune').fadeOut(1000);" onmouseout="document.getElementById('jaune').fadeOut(1000);"></div><br />
 
    <div id="jaune" style="width: 500px; height: 500px; background: yellow; margin:auto; margin-top: 200px;"></div>
</html>

J'ai essayé de mettre la div 'jaune' avec un display: none; dans son style mais je n'ai toujours aucune réaction, quand ma souris passe sur la div noire (le problème vient certainement de mon javascript, erreur de syntaxe ?) C'est très certainement une petite erreur idiote, mais la je sèche un peu.

**NoSmoking** · 03/11/2012, 16h22

Bonjour,
on applique le méthode jQuery aux objets jQuery donc

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="background: black; width: 100px; height: 100px; float: left;"
  onmouseover="$('#jaune').fadeOut(1000);"
  onmouseout= "$('#jaune').fadeIn(1000);">
</div>

mais on peut faire bien plus propre...

**Valfye** · 03/11/2012, 16h31

Super ça marche j'aurais appris un truc aujourd'hui merci.

onmouseover et fade avec jquery

jQuery

Discussions similaires

Partager

Partager