Modifier la taille d'une image [web]
Résolu
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
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 -
https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641
en espèrent que tu y trouve ton bonheur :) -
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 -
J'ai trouver un qui explique comment agrandir l'image en cliquant dessus,
seulement c'est en html :/ si sa peut toujours t'aider -
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> -
Met ta question comme étant résolu ! =)
