MouseOver progressif

[alargeau]

Bonjour,

j'espère tout d'abord être au bon endroit. Si ce n'est pas le cas, je m'excuse d'avance.

Je viens donc vers vous car j'ai un petit soucis que je n'arrive pas à régler. J'ai eu beau chercher sur internet et sur ce forum, je n'ai pas trouvé de réponse à mon problème qui me semble pourtant très banal. Peut-être qu'il me manque simplement le vocabulaire...

Mon problème est donc le suivant : j'ai inséré à mon site un bouton sous forme d'onglet, rien d'extraordinaire. J'aimerais qu'en passant sur ce bouton, ça fasse un effet comme si le bouton s'étendait, ou sortait davantage. On m'a dit d'utiliser le "mouseover". Le problème, c'est que le mouseover est bien trop rapide, les deux images s'enchaînent à la vitesse de la lumière et il n'y a donc pas d'effet progressif au mouvement de l'onglet.

Je suis donc revenu à la case départ et voici mon code :

	<div id="myExtraContainer4">
        <ul>
        <li><a href="http://www.lamicale309.net/fr/" title="Aller sur le site de L'Amicale 309"><img src="http://www.peugeot309.net/images/boutonamicale.png"></li> 
        </ul>
    </div>

Comment puis-je donc faire un mouseover progressif ?

Je vous remercie d'avance.

Modifié 14 Mai 2010 par alargeau

[Portekoi]

Bonsoir,

Pour cela, tu peux utiliser Jquery.

Dans le header :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$().ready(function() {
	$('#Pub').mouseenter(function(){
		$(this).animate({ width: '300px', height: '130px'}, 250);
	 });

	$('#Pub').mouseleave(function(){
		$(this).animate({ width: '210px', height: '40px'}, 250);
	 });
});	//Fin fonction ready
</script> 

Dans le body :

<div id="Pub"></div>

Propriété animate :
/>http://api.jquery.com/animate/

Bon dev.

Portekoi

Modifié 15 Mai 2010 par Portekoi
Modifier pour utiliser "mouseenter" et "mouseleave" au lieu de "mouseover" et "mouseout". L'effet s'appliquera aux enfants (a, li etc.) et ne refermera pas le div.

[alargeau]

Bonsoir et merci pour votre réponse.

Il aurait peut-être été judicieux de ma part de préciser à quel point je suis débutant dans le domaine. J'ai toutefois compris la "logique" de ce code, c'est déjà un début. Si j'ai bien compris, le "Pub" est la donnée qui permet au script d'aller chercher l'image et le lien qui la concerne. Si je suis toujours, les indications en pixels présentent deux états d'hauteur différente, ce qui est donc censé donner cet effet de glissement.

Je suis allé voir la page conseillé et elle me paraît assez compliquée.

Je vais toutefois essayer d'exposer mon problème plus clairement. Mon onglet est en réalité une image avec un lien. Je pensais faire une espèce de "mouseover" pour que d'un onglet en position fermé, je passe à un onglet en position ouvert lorsque ma souris est dessus. Le rollover n'est pas un problème, c'est même assez simple. Cependant mon problème c'est que premièrement, avec ce rollover, il n'y a pas de glissement de l'onglet : on affiche une image puis la seconde la remplace lorsque la souris passe sur la première. Le second problème, c'est que la seconde image, qui est donc plus grande que la première (puisqu'il s'agit de l'onglet ouvert) vient sur la page.

Le problème en images :

1.

2.

On s'aperçoit donc que l'onglet en question, non seulement ne "glisse" pas (mais c'est normal puisque je ne sais pas comment faire ça) mais en plus vient sur la page.

Modifié 14 Mai 2010 par alargeau

[Portekoi]

Re,

Je ne comprends pas un point :

A l'affichage de la seconde image, étant donné qu'elle est plus grande, elle apparaitra forcément sur la page non?

Où veux tu l'afficher?

Portekoi

[Portekoi]

Regarde ce site :

/>http://acrisdesign.com/2010/04/create-animated-vertical-menu-using-jquery/