Comment ajouter un Onmouseout?

**hichamdeb** · 05/08/2011, 12h07

Bonjour

cela fait 2 jours que je me creuse la tête en vain! c'est assez banale comme question mais il faut dire que je suis pas très douer en JS :p
Je voudrai rajouter un onmouseout quelque part sur mon code afin de rajouter le code suivant "min-width:310px;" sur le code css

code initial

Code :

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

1
2
3
 
background: url(images/1.jpg) repeat scroll 0%;
width:310px;

Avec onmouseout

Code :

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

1
2
3
4
 
background: url(images/1.jpg) repeat scroll 0%;
width:310px;
min-width:310px;

voici mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<style type="text/css">
 
 
.jimgMenu ul li.landscapes a {
 
	background: url(images/1.jpg) repeat scroll 0%;
	width:310px;
	min-width:310px;
}
 
.jimgMenu ul li.people a {
	background: url(images/2.jpg) repeat scroll 0%;
}
 
.jimgMenu ul li.nature a {
	background: url(images/3.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
	background: url(images/4.jpg) repeat scroll 0%;
}
 
 
</style>
 
 
 
<!--[if IE]>
<style type="text/css">.jimgMenu {position:relative;width:555px;height:160px;overflow:hidden;margin-left:0px;}</style>
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {
 
  // find the elements to be eased and hook the hover event
  $('div.jimgMenu ul li a').hover(function() {
 
    // if the element is currently being animated (to a easeOut)...
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "60px"}, {duration: 400, easing:"easeInOutQuad"})
    } else {
      // ease out slowly
      $(this).stop('animated:').animate({width: "60px"}, {duration: 450, easing:"easeInOutQuad"});
    }
  });
 
 
});
 
</script>

**RomainVALERI** · 05/08/2011, 13h37

Je ne suis pas spécialiste de la syntaxe jQuery, mais il me semble que ça fait partie des bases de ce framework... (une petite recherche dans leur doc ?)

Un conseil quand même en passant : ne pas mettre la charrue (jQuery) avant les boeufs (JS).

(sans allusion aucune à un membre (aussi illustre soit-il) du forum

voir ci-dessous

)

**Bovino** · 05/08/2011, 13h41

Mais...
Quel est l'intérêt de mettre un min-width de 310px sur un élément dont tu fixes déjà le width à 310px ???

EDIT :
J'adore !

Code :

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

1
2
3
4
5
6
if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
    }

**hichamdeb** · 05/08/2011, 14h07

si vous voulais voir l'origine du code voici un lien dailleurs c'est un très beau menu a telecharger

http://www.alohatechsupport.net/webd...th_jquery.html

Le demo

http://www.alohatechsupport.net/exam...ge-menu-1.html

En effet sa se trouve que avec le with si on met la première photo par défaut (pas la dernière) le menu se replie si le curseur est hors le menu!

et avec min-with il reste bloqué sur la même photo du coup on ne pas pas voir les autre!