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 :

Aggrandir et diminuer une image onMouseOver


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 15
    Par défaut Aggrandir et diminuer une image onMouseOver
    Bonjour

    Je n'y connais pas grand chose en JS, mais je m'y lance.

    Je voudrai faire en sorte qu'en passant la sourie sur une image celle-ci puisse s'aggrandire et en onMouseOut puisse diminuer. exactement le même effet qu'ici : (sauf que c'est du flash)

    j'ai trouvé sur scriptaculous des script JS qui se rapprocherait de mes attentes, le soucis est qu'ils fonctionnent avec onClick, mes tests en onMouseOver ont l'air de lancer plusieurs fois la fonction du Grow().
    voilà le résultat : c'est une honte... c'est horrible...

    et le lien vers le fichier JS :le fichier javascript...

    j'ai un peu tout tenté, sans succès...

    un grand merci à ceux qui pourront m'aiguiller ou me dépanner

    une petite explication ne serait pas de refus, effectivement, je ne comprend pas pourquoi il y a récursivité au niveau de la fonction Grow().



    merci

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    sinon sans librairie :

    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
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    		<style type="text/css">
    			ul{
    				list-style:none;
    			}
    			ul li{
    				float:left;
    				margin : 10px;
    				position:relative;
    				width:100px;
    				height:100px;
    			}
    			ul li img{
    				position:absolute;
    			}
    		</style>
     
    		<script type="text/javascript">
    			function initImage(contentId){
    				var conteneur = document.getElementById(contentId);
    				var ListeImage = conteneur.getElementsByTagName("img");
    				for (var i = 0, l = ListeImage.length; i < l; i++) {
     
    					var element = ListeImage[i];
    					var action = function(){
    						var t = i ;
    						var x = element
    						x.timer = null;
    						x.startX = parseInt(x.width);
    						c = (1000 / 50);
    						d = Math.round(400 / c);
    						w = new Array();
    						for (var i = 1; i <= d; i++) {
    							w.push(easeInOutSine(i * c, x.startX, x.startX+50 - x.startX, 400))
    						}
    						x.w = w ;
     
    						return function(){
    							x.currentStepX = 0 ;
    							x.currentStepY = 0 ; 
    							go(x,c,false);
    						};
    					}(i,element);
     
    					var action2 = function(){
    						var x = element
    						c = (1000 / 50);
    						return function(){
    							x.currentStepX = x.currentStepX-1 ;
    							x.currentStepY = x.currentStepY-1 ; 
    							go(x,c,true);
    						};
    					}(i,element);
     
    					ListeImage[i].onmouseover = action;
    					ListeImage[i].onmouseout = action2;
    				}
    			}
     
    			function EffectOpen(element){
     
    			}
    			function easeInOutSine(t, b, c, d) {
    				return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
    			}
     
     
    			function go(b, c, out) {
    				if(b.timer != null){
    					window.clearInterval(b.timer);
    					b.timer = null;
    				}
    				b.timer = window.setInterval(function() {
    				var a = true;
    				if (b.w[b.currentStepX]) {
    					b.style['width'] = b.w[b.currentStepX] + 'px';
    				if (b.center) {
    					b.style['left'] = ( - (b.w[b.currentStepX] / 2)) + 'px'
    				}
    				if(!out){
    					b.currentStepX++;
    				}
    				else{
    					b.currentStepX--;
    				}
    				a = false
    				}
    				if (a) {
    					window.clearInterval(b.timer);
    					b.timer = null;
    					return
    				}
    				}, c);
    			}
    		</script>
    	</head>
    	<body onload="initImage('mesimages')">
    		<ul id="mesimages">
    			<li><img src="diapo_mini/images/diapo1.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo2.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo3.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo4.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo5.jpg" width="100px;" /></li>
    		</ul>
    	</body>
    </html>
    tu n'as plus qu'a le fignoler

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 15
    Par défaut
    Merci pour ta réponse, je lutte un peu pour personnaliser le tout en fait, il y a certaines instructions que je ne comprends pas (j'ai pas mal de lacunes en maths, j'avoue c'est difficile pour moi de me concentrer...) comme :

    c = (1000 / 50); // pourquoi 1000/50 = 20 a quoi ca se refere ??
    d = Math.round(400 / c);// resultat est 20 ??? a quoi ca se refere ???

    ces données sont réutilisés dans la fonction go(b(qui est l'element), c, out(booleen))

    J'ai fais pas mal de Java, mais j'avoue que mon frein sont les maths, c'est un peu pourquoi le JS me fait un peu flipper

    j'aimerai que l'aggrandissement se fasse par le centre de l'image et non sur le coin gauche... j'ai beau chercher, je suis vite perdu dans les fonctions mathématiques

    merci pour ton aide

  4. #4
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    J'ai modifié et commenté le script en fonction des problèmes que tu as rencontré et ajouté le centrage


    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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    		<style type="text/css">
    			ul{
    				list-style:none;
    			}
    			ul li{
    				float:left;
    				margin : 10px;
    				position:relative;
    				width:100px;
    				height:100px;
    				border:1px solid red;
    			}
    			ul li img{
    				position:absolute;
    				left:50%;
    				margin-left:-50px;
    				top:50%;
    			}
    		</style>
     
    		<script type="text/javascript">
    			function initImage(contentId){
    				var conteneur = document.getElementById(contentId);
    				var ListeImage = conteneur.getElementsByTagName("img");
    				for (var i = 0, l = ListeImage.length; i < l; i++) {
     
    					var element = ListeImage[i];
     
    					//On centre l'élément de façon vertical en fonction de sa hauteur
    					element.style.marginTop = ( - (element.offsetHeight / 2)) + 'px'
     
    					var action = function(){
    						var t = i ;
    						var x = element
    						//Speed définit combien de temps l'effet doit durer :)
    						var Speed = 250 ;
    						x.timer = null;
    						x.startX = parseInt(x.width);
    						//c corespond au temps en ms pour l'appel de la méthode go ici 20ms
    						c = (1000 / 50);
    						//Math.round arrondi à l'entier supérieur
    						d = Math.round(Speed / c);
    						w = new Array();
    						for (var i = 1; i <= d; i++) {
    							//Le 50 indique qu'as partir de la taille originale on ajoute 50px
    							w.push(easeInOutSine(i * c, x.startX, x.startX+50 - x.startX, Speed))
    						}
    						x.w = w ;
     
    						return function(){
    							x.currentStepX = 0 ;
    							x.currentStepY = 0 ; 
    							go(x,c,false);
    						};
    					}(i,element);
     
    					var action2 = function(){
    						var x = element
    						c = (200 / 50);
    						return function(){
    							x.currentStepX = x.currentStepX-1 ;
    							x.currentStepY = x.currentStepY-1 ; 
    							go(x,c,true);
    						};
    					}(i,element);
     
    					ListeImage[i].onmouseover = action;
    					ListeImage[i].onmouseout = action2;
    				}
    			}
     
    			function EffectOpen(element){
     
    			}
    			function easeInOutSine(t, b, c, d) {
    				//Fonction mathématique permettant de calculer un effet fluide au niveau des pas d'agrandissement
    				return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
    			}
     
     
    			function go(b, c, out) {
    				if(b.timer != null){
    					window.clearInterval(b.timer);
    					b.timer = null;
    				}
    				b.timer = window.setInterval(function() {
    				var a = true;
    				if (b.w[b.currentStepX]) {
    					//On augmente la taille
    					b.style['width'] = b.w[b.currentStepX] + 'px';
    					//On positionne de façon centré par rapport au conteneur
    					b.style.marginLeft = ( - (b.w[b.currentStepX] / 2)) + 'px'
    					b.style.marginTop = ( - (b.offsetHeight / 2)) + 'px'
     
    				if(!out){
    					b.currentStepX++;
    				}
    				else{
    					b.currentStepX--;
    				}
    				a = false
    				}
    				if (a) {
    					window.clearInterval(b.timer);
    					b.timer = null;
    					return
    				}
    				}, c);
    			}
    		</script>
    	</head>
    	<body onload="initImage('mesimages')">
    		<ul id="mesimages">
    			<li><img src="diapo_mini/images/diapo1.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo2.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo3.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo4.jpg" width="100px;" /></li>
    			<li><img src="diapo_mini/images/diapo5.jpg" width="100px;" /></li>
    		</ul>
    	</body>
    </html>

  5. #5
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    Je suis peut-être hors sujet mais il n'y a pas besoin de JS pour réaliser ce genre d'effet...

    exemple :
    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
     
    ...
    <head>
    ...
      <style>
        .zoom img {width:150px; height:50px;} 
     
        .zoom:hover img {width:300px; height:100px;}
      </style>
    </head>
    <html>
      <body>
    ...
        <a id="pour-le-zoom" class="zoom"><img src="MonImage" /></a>
    ...
      </body>
    </html>
    devyan.

  6. #6
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Citation Envoyé par devyan Voir le message
    Je suis peut-être hors sujet mais il n'y a pas besoin de JS pour réaliser ce genre d'effet...
    hélas, pour IE (au moins jusqu'au 6), si ...

    Il ne reconnait le :hover que sur les <a>

    A+

  7. #7
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    tu n'es pas hors sujet je te rassure, juste qu'ici on essaye de rendre ça "ergonomique" avec un effet de style ;-)

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

Discussions similaires

  1. Infobulle sur une image (onmouseover )
    Par atk_49 dans le forum Excel
    Réponses: 6
    Dernier message: 08/09/2014, 16h58
  2. [Imagick] Diminuer une image sans "créer d'image" :x
    Par lennelei dans le forum Bibliothèques et frameworks
    Réponses: 3
    Dernier message: 06/06/2007, 16h37
  3. [JAI] Diminuer la qualité d'une image PNG
    Par supermanu dans le forum 2D
    Réponses: 2
    Dernier message: 11/04/2006, 11h49
  4. Changer une image onmouseover
    Par Linaa dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/03/2006, 13h46

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