Discussion :

[Beatboxxy]

Hello à tous,

Je viens à vous pour un petit problème de OnMouseOver. En effet j'ai un menu textuel en liste et une div vide (avec un simple fond de couleur via css). Ce que j'essaie de faire c'est que lors d'un passage sur un lien, une image s'affiche sur la div. J'ai essayé d'utiliser getdocumentbyid mais ça n'a pas fonctionné comme prévu =S

Voici mon code si ça peut aider :

Code :

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

1
2
3
4
5
6
7
8
9
10
<ul id="nav">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Vid&eacute;os</a></li>
	<li><a href="#">Projets</a></li>
	<li><a href="#">&Eacute;quipe</a></li>
	<li><a href="#">Contact</a></li>
</ul>
 
<div id="slide">
</div>

Et le CSS :

Code :

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

1
2
3
4
5
6
7
8
9
#slide {
	width:950px;
	height:225px;
	margin:0px auto;
	padding:0px 0px 0px 0px;
	background:#cfcfcf;
	border-top:1px #fff solid;
	border-bottom:1px #fff solid;
}

Petite question bonus, y'a-t-il moyen de faire une apparition progressive (en fondu) et pas nette d'un coup que ce soit en JS, par CSS ou même jQuery ?

Merci d'avance !

[Patrice.H]

J'ai essayé d'utiliser getdocumentbyid mais ça n'a pas fonctionné comme prévu =S

Essaye plutôt

Code :

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

document.getElementById()

Pour l'apparition en fondu, je ne maitrise pas jQuery MAIS:
Tu peux également utiliser JS et les effets de transition CSS3, mais l'effet de fondu ne sera alors effectif que sur les navigateur supportant les transitions (Chrome et Safari pour le moment). Par contre, là je pourrais t'aider

[Beatboxxy]

Hello Patrice !

Merci, la syntaxe était pas tout à fait correcte et j'ai réussi à rectifier tout ça

En ce qui concerne l'effet de fondu, je suis bien intéressé par ta solution en JS/CSS3, peux-tu m'en dire plus ?

Merci !

[Patrice.H]

Bonjour,

Voici le CSS qui t'intéresse, et qui permet de mettre une durée de transition lorsque la propriété "opacity" est modifiée. (A placer sur ton image donc).

Code :

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

1
2
3
4
5
6
7
8
 
        opacity:0;
        /*Transition effect*/
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 500ms;
 
	-moz-transition-property: opacity;
	-moz-transition-duration: 500ms;

Il te suffit ensuite d'ajouter une fonction a ton menu nav te permettant de modifier l'opacité au survol.

JS:

Code :

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

1
2
3
4
5
6
7
8
9
 
function affiche()
{
document.getElementById('slide').style.opacity='1';
}
function cache()
{
document.getElementById('slide').style.opacity='0';
}

HTML:

Code :

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

1
2
3
 
<ul id="nav"
onmouseover="affiche();" onmouseout="cache();">

Je n'ai pas testé (personnellement je l'utilise sans Javascript), mais a priori cela devrait fonctionner.

Tu pensera aussi à retirer le mot "problème" de ton titre de message, et à donner un titre plus explicite. Par définition, tout post dans ce forum correspond à un problème.
Cordialement.