IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Comment ajouter un Onmouseout?


Sujet :

JavaScript

  1. #1
    Membre confirm�
    Inscrit en
    D�cembre 2007
    Messages
    105
    D�tails du profil
    Informations forums :
    Inscription : D�cembre 2007
    Messages : 105
    Par d�faut Comment ajouter un Onmouseout?
    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>

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POO�te
    Inscrit en
    Avril 2008
    Messages
    2 652
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activit� : POO�te

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par d�faut
    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 )

  3. #3
    R�dacteur

    Avatar de Bovino
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - �diteur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par d�faut
    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"});
        }
    Pas de question technique par MP !
    Tout le monde peut participer � developpez.com, vous avez une id�e, contactez-moi !
    Mes formations video2brain : La formation compl�te sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'int�gration de JSFiddle et CodePen sur le forum

  4. #4
    Membre confirm�
    Inscrit en
    D�cembre 2007
    Messages
    105
    D�tails du profil
    Informations forums :
    Inscription : D�cembre 2007
    Messages : 105
    Par d�faut
    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!

  5. #5
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POO�te
    Inscrit en
    Avril 2008
    Messages
    2 652
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activit� : POO�te

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par d�faut
    Citation Envoy� par Bovino Voir le message
    J'adore !
    Faut bien avouer... mais qu'est-ce qui se passe en ce moment ... ?

    Fais gaffe Bovino, je suis sur que dans le tas il y a des "clients myst�re" qui posent de fausses questions pour tester notre patience

Discussions similaires

  1. [syst�me] Comment ajouter un item dans le context menu de Windows ?
    Par ddmicrolog dans le forum API, COM et SDKs
    R�ponses: 8
    Dernier message: 29/06/2005, 17h03
  2. [debutant] Comment ajouter des .class ?
    Par Slein dans le forum Eclipse Java
    R�ponses: 3
    Dernier message: 30/04/2004, 14h30
  3. [ADOQuery]Comment ajouter un prametre a un ADOQuery
    Par bitou dans le forum Bases de donn�es
    R�ponses: 2
    Dernier message: 21/04/2004, 15h08
  4. Comment ajouter un choix d'OS à LILO boot ???
    Par shkyo dans le forum Administration syst�me
    R�ponses: 7
    Dernier message: 19/04/2004, 15h20
  5. R�ponses: 14
    Dernier message: 28/08/2003, 23h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo