Modifier la taille d'une image [web]

Résolu
Laura -  
azzedine59 Messages postés 173 Date d'inscription   Statut Membre Dernière intervention   -
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

  1. Jip
     
    Un truc dans ce gout la ?
    http://www.jejavascript.net/imag_zoom.php
    2
  2. Laura
     
    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
    0
  3. azzedine59 Messages postés 173 Date d'inscription   Statut Membre Dernière intervention   23
     
    J'ai trouver un qui explique comment agrandir l'image en cliquant dessus,
    seulement c'est en html :/ si sa peut toujours t'aider
    0
    1. azzedine59 Messages postés 173 Date d'inscription   Statut Membre Dernière intervention   23
       
      ca donnera ça !! (bien sur sans le CSS ^^') :
      http://www.sdz-files.com/cours/html-css/p1/ch5/image_lien_miniature.html
      0
    2. azzedine59 Messages postés 173 Date d'inscription   Statut Membre Dernière intervention   23
       
      http://www.sdz-files.com/cours/html-css/p1/ch5/image_lien_miniature.html
      ici
      0
    3. Laura
       
      Merci azzedine, mais ce n'est pas tout a fait ça que je cherche :/
      0
  4. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  5. Laura
     
    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
    0
  6. Laura
     
    Oui Jip, c'est exactement ce que je j'aimerai faire en jquery.
    Si tu peux m'aider je suis toute ouïe.

    Merci
    0
  7. Laura
     
    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>
    
    0
  8. azzedine59 Messages postés 173 Date d'inscription   Statut Membre Dernière intervention   23
     
    Met ta question comme étant résolu ! =)
    0