onmouseover et fade avec jquery
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:
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.
