Modifier la taille d'une image [web]

Résolu/Fermé

Laura - 12 janv. 2012 à 19:49
azzedine59 Messages postés 173 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 25 janvier 2016 - 14 janv. 2012 à 23:07

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

A voir également:

Modifier taille image html
Comment réduire la taille d'un fichier - Guide
Modifier liste déroulante excel - Guide
Comment modifier un pdf - Guide
Image iso - Guide
Modifier dns - Guide

8 réponses

Réponse 1 / 8

Jip
14 janv. 2012 à 18:22

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

Réponse 2 / 8

azzedine59 Messages postés 173 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 25 janvier 2016 23
12 janv. 2012 à 19:51

https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641

en espèrent que tu y trouve ton bonheur :)

Réponse 3 / 8

Laura
12 janv. 2012 à 19:55

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

Réponse 4 / 8

azzedine59 Messages postés 173 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 25 janvier 2016 23
12 janv. 2012 à 20:04

J'ai trouver un qui explique comment agrandir l'image en cliquant dessus,
seulement c'est en html :/ si sa peut toujours t'aider

azzedine59 Messages postés 173 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 25 janvier 2016 23
12 janv. 2012 à 20:12

ca donnera ça !! (bien sur sans le CSS ^^') :
http://www.sdz-files.com/cours/html-css/p1/ch5/image_lien_miniature.html

azzedine59 Messages postés 173 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 25 janvier 2016 23
12 janv. 2012 à 20:13

http://www.sdz-files.com/cours/html-css/p1/ch5/image_lien_miniature.html
ici

Laura
13 janv. 2012 à 10:00

Merci azzedine, mais ce n'est pas tout a fait ça que je cherche :/

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Laura
Modifié par Laura le 14/01/2012 à 17:32

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

Réponse 6 / 8

Laura
14 janv. 2012 à 21:14

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

Merci

Réponse 7 / 8

Laura
14 janv. 2012 à 21:27

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>

Réponse 8 / 8

azzedine59 Messages postés 173 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 25 janvier 2016 23
14 janv. 2012 à 23:07

Met ta question comme étant résolu ! =)

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

À quoi correspond 32x32 US en taille française pour un jean ?

W32 L32: correspondance entre taille US et taille française

Discussions similaires

Newsletters