Modifier la taille d'une image [web]

[Résolu/Fermé]
Signaler
-
Messages postés
173
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
25 janvier 2016
-
Bonjour,

Je souhaiterai pouvoir redimensionner une image, en passant ma souris dessus, en jquery ou javascript mais je ne m'y connais pas du tout dans ce domaine.

Je l'ai fait en css, mais le redimensionnement est instantané alors que je voudrais que ça soit progressif, et ne pas à avoir à utiliser le css3.

S'il existe une manière assez simple de le faire en javascript/jquery je suis preneuse.

Je vous remercie


8 réponses

Un truc dans ce gout la ?
http://www.jejavascript.net/imag_zoom.php
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
173
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
25 janvier 2016
22
J'ai trouver quelques informations sur des forums, mais rien qui spécifie le temps que l'image met à apparaître et qui montre que le redimensionnement est induis du passage de la souris sur l'image.

:/

http://www.commentcamarche.net/forum/affich-4735139-javascript-redimensionnement-d-image

http://www.javascriptfr.com/codes/REDIMENSIONNEMENT-IMAGE_39901.aspx
Messages postés
173
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
25 janvier 2016
22
J'ai trouver un qui explique comment agrandir l'image en cliquant dessus,
seulement c'est en html :/ si sa peut toujours t'aider
Messages postés
173
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
25 janvier 2016
22
ca donnera ça !! (bien sur sans le CSS ^^') :
http://www.sdz-files.com/cours/html-css/p1/ch5/image_lien_miniature.html
Messages postés
173
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
25 janvier 2016
22
http://www.sdz-files.com/cours/html-css/p1/ch5/image_lien_miniature.html
ici
Merci azzedine, mais ce n'est pas tout a fait ça que je cherche :/
Bonjour,

J'ai trouvé un élément de réponse alors pour ceux qui chercheraient à faire comme moi et qui serai bloqué, voici un début de réponse :

<img id="image" src="<?php bloginfo('template_url'); ?>/images/cercle.png"> 
<script> 
    $("img").hover(function () { 
          $('#image').animate({ 
    width: '70%', 
    height: '700%' 
  }, 500, function() { 
    // Animation complete. 
  }); 
    }); 
</script> 



Par contre du coup, j'ai un autre soucis, une fois que je passe a souris sur mon image, elle agrandie progressivement, ça c'est très bien mais lorsque ma souris qui l image elle ne reprend pas sa forme d'origine.

Si qqun pouvait m'aider, ça serait sympas.

merci
Oui Jip, c'est exactement ce que je j'aimerai faire en jquery.
Si tu peux m'aider je suis toute ouïe.

Merci
J'ai finalement trouvé en me servant des .mouseover et .mouseout =)

<img id="image" src="<?php bloginfo('template_url'); ?>/images/cercle.png">
<script>
$("img").mouseover(function () {
          $('#image').animate({
    width: '70%',
    height: '70%'
  }, 300, function() {
    // Animation complete.c
  });
    });
    
$("img").mouseout(function () {
	          $('#image').animate({
    width: '40%',
    height: '40%'
  }, 300, function() {
    // Animation complete.c
  });
    });
    
</script>
Messages postés
173
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
25 janvier 2016
22
Met ta question comme étant résolu ! =)