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

Bibliothèques & Frameworks Discussion :

[Débutant] Survol d'une image sans effet -> ? [script.aculo.us]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 59
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Points : 80
    Points
    80
    Par défaut [Débutant] Survol d'une image sans effet -> ?
    Bonjour,
    Voilà ce qui m'arrive: J'ai le code ci-dessous que j'ai rentré en vue de me permettre d'afficher un texte caché quand on survole l'image [+] (div avec id="Bouton_plus")... Bon, ça, c'est la théorie... Maintenant, coté pratique, quand on survole [+] Rien ne bouge ! J'avoue que je ne comprends pas ! Est-ce que j'ai mal codé le survol / à [+] ? Qu'en pensez-vous, SVP ?

    Par avance Merci pour toute suggestion que vous pourriez avoir à me proposer !

    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
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    <html>
    <head>
    <title>Empecher un rebond+ (Scriptacolous)</title>
     
    <style type="text/css">
    #Container
    {
       z-index: 1;
       border: 1px solid #F9CB66;
    }
    #Sous_titre
    {
       float: left;
       height: 20px; 
       background-image: url("images/Degrade_sous_titre.png");
       background-repeat: repeat-x;
       padding: 0px;
       margin: 0px;
       text-align: left;
       line-height: 18px;
       text-indent: 15px;
       color: #9E352F; /* Texte en rouge */
       font-weight: bold; /* Texte en gras */
       font-size: 13px;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }
    #Ombre_sous_titre_d
    {
       float: left;
       background-color: #663D1D;
       width:5px; 
       height:17px;
       margin-top: 3px; /* Décalage de l'ombre */
    }
    #Bouton_plus
    {
       float: left;
       width: 20px;
       height: 19px;
       background-color: #FFD9B3;
       background-image: url("images/Plus_mini_2.gif");
       background-position : right; /* Fond avec bouton "Plus" positionné à droite */
       background-repeat: no-repeat;
    }
    #Texte
    {
       float: left;
       height: 19px;
       background-image: url("images/Fond_texte.png");
       background-repeat: repeat-x; 
       text-align: left;
       line-height: 17px;
       text-indent: 1px;
       color: black;
       font-weight: normal;
       font-size: 12px;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }
    #Ombre_ligne_d
    {
       float: left;
       background-color: #663D1D;
       width:5px; 
       height:19px;
    }
    #Texte_caché
    {
       float: left;
       background-color: #FFE9D2;
       background-image: url("images/Ombre_ligne_droit.png");
       background-position : right; /* Fond avec ombre positionnée à droite */
       background-repeat: repeat-y;
       text-align: left;
       padding-left: 5px;
       padding-right: 10px;
       line-height: 17px;
       text-indent: 7px;
       color: black;
       font-weight: normal;
       font-size: 12px;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }
    </style>
     
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
     
    <script>
    $(document).ready(function(){
    	var mobilite="non"
    	var demande_remontee="non"
    	var demande_descente="non"
     
    	function memoire(){
    		mobilite="non"
    		if(demande_remontee=="oui"){
    			demande_remontee="non"
    			new Effect.BlindDown('Texte_caché');
    		}
    	};
     
    		$('Bouton_plus').mouseover(function(){ /* Si demande de descente... */
    			if(mobilite=="non"){ /* Si il n'y a aucun mouvement en cours... */
    				mobilite="oui" /* Alors on autorise la descente */
    				var euh="hum"
    				new Effect.BlindDown('Texte_caché');
    			}
    		});
    		$('Bouton_plus').mouseout(function(){ /* Même principe que pour la descente */
    			if(mobilite=="non"){
    				mobilite="oui"
    				new Effect.BlindUp('Texte_caché');
    			}else{ /* Si un mouvement est déjà présent... */
    				demande_remontee="oui" /* ... On mémorise la demande, qui sera exécutée à la fin de la descente en cours */
    			}
    		});
    });
    </script>
     
    </head>
    <body bgcolor="#FFFFFF" background="images/Fond.png">
     
    <div id="Container" style="position:absolute; width:310px; height:100px; left: 200px; top: 10px">
     
    	<div id="Sous_titre" style="width:300">Sous titre</div>
    	<div id="Ombre_sous_titre_d"></div>
     
    	<div id="Bouton_plus" class="numero_de_bouton1"></div>
    	<div id="Texte" style="width:280px">Texte</div>		
    	<div id="Ombre_ligne_d"></div>
     
    	<span class="message_numero1">
    		<!-- Gestion / texte caché -->
    			  <div id="Texte_caché" style="display:none; width:290px">
    				<span>Texte qui apparait... Texte qui apparait... Texte qui apparait... Texte qui apparait... </span>
    				<br /><br />
    			  </div>
    	</span>
    </div>
     
    </body>
    </html>

  2. #2
    Membre habitué
    Profil pro
    Inscrit en
    Février 2005
    Messages
    183
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 183
    Points : 125
    Points
    125
    Par défaut
    Salut, j'ai pas testé donc rien de sûr mais est-ce que les accents sont autorisé pour les identifiants ?

    Je fais référence à 'Texte_caché'.

    EDIT : Au passage, ça manque de points virgules ton code ... voir aussi de ce côté là.

  3. #3
    Membre expérimenté
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Points : 1 333
    Points
    1 333
    Par défaut
    Tu utilises une syntaxe jQuery ! Ca ne peut pas aller !
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    Event.observe(document, "dom:loaded", function(){
    // ...
    $('Bouton_plus').observe("mouseover", function() {
    //...
    });
    });

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 59
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Points : 80
    Points
    80
    Par défaut
    Merci à vous !
    Effectivement, gwyohm, je reconnais qu'il y a eu de ma part quelque confusion / à jQuery... Il faut dire que je suis parti d'un pgm équivalent, que j'avais construit en jQuery (et qui marche très bien, même si il y a quelques accentuations "particulières" mais qui, à priori, sont autorisées en html ou javascript) et qu'à un moment, j'ai vu que je ne pourrais pas utiliser leur fonction "slideDown" pour générer un effet de réalisme particulier (genre décélération en fin de mouvement...) je suis revenu à le fonction "BlindDown" de Scriptaculous qui elle, permet ce genre de variation ! (coté jQuery, je n'ai pas pu utiliser "animate() non plus , car, à la différence de "slideDown", cette fonction ne permet pas d'ajuster le height d'un div à la hauteur du texte qu'elle comprend, vu qu'elle demande d'entrer un height bien précis et ne comprend pas, du fait, la css "auto" !)
    Sinon, Merci gwyohm pour les réajustements que tu me proposes !
    A ce propos, aurais-tu quelque adresse à me proposer pour me permettre d'approfondir le sujet / aux 2 lignes de code que tu me proposes (vérif / initialisation du DOM, gestion des évènements / la souris...) car, pour l'instant, je n'ai trouvé ni dans le cours / à Scriptaculous, ni sur Google !

    Par avance Merci !

  5. #5
    Membre expérimenté
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Points : 1 333
    Points
    1 333
    Par défaut
    Et bien les cours donne des cas pour débuter, mais après, pas de secret: il faut lire la doc prototype...
    http://api.prototypejs.org/
    tu as aussi la doc scriptaculous, mais les cours sur developpez.com sont à peu près équivalents mais en français
    http://wiki.github.com/madrobby/scriptaculous/

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 59
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Points : 80
    Points
    80
    Par défaut
    Merci gwyohm,
    J'ai été voir et, effectivement, ça me donne quelques pistes à prendre en compte, notamment / à Event.observe()... Sinon, je retiens tes 2 lignes de code pour m'aider à me lancer et... cette petite découverte, entre temps, via l'ami google (quand même ) et qui correspond bien à mon besoin du moment (démos + code pour me lancer / aux évènements / la souris -> générer un effet !

    A une prochaine et...
    Bonne continuation à toi !

    (Rézolu !)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Application d'un height 100% sur une image sans effet
    Par Earthwormjim dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 26/05/2009, 01h28
  2. Effet de zoom au survol d'une image
    Par bszakaria dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 27/05/2008, 17h02
  3. Réponses: 4
    Dernier message: 08/11/2007, 16h15
  4. problème avec un rollover (effet de survol) sur une image/bouton
    Par f56bre dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/03/2007, 14h10
  5. [CSS] effet survol d'une image
    Par cyberhunter dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 11/10/2005, 17h09

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