AGRANDIR IMAGE AU PASSAGE DE LA SOURIS

louis1984 -  
Bonjour,

Je souhaite qu'une image s'agrandisse lorsqu'elle est survolee par la souris, et qu'elle reprenne sa dimention d'origine lorsqu'elle n'est plus survolee par la souris.

J'ai ce code: <img src="image/image.jpg" onmouseover="this.height=200 px; this.width='500 px'">,

Comment je peux faire pour que l'image reprenne sa taille d'origine une fois qu'elle n'est plus survolee par la souris?

Merci.
Configuration: Windows Vista Internet Explorer 7.0

18 réponses

Résumé de la discussion

La discussion porte sur l'agrandissement d'une image au passage de la souris et sur son retour à la taille d'origine lorsque le survol cesse, avec un exemple utilisant onmouseover. Plusieurs répondants privilégient une approche CSS avec :hover pour agrandir l'image sans JavaScript, évitant les manipulations inline et améliorant la compatibilité moderne entre navigateurs. En parallèle, des commentaires évoquent les limites sur des navigateurs anciens comme IE6 où le hover peut poser problème et où des astuces avec des liens ou du JavaScript sont évoquées. Dernier élément utile, des échanges soulignent qu'un effet purement CSS peut suffire pour la plupart des usages, mais pour une compatibilité maximale, tester sur plusieurs versions et envisager une légère solution JavaScript si nécessaire.

Bobot (l’IA à votre service)
  1. le hollandais volant
    Salut : en css.

    https://lehollandaisvolant.net/errors/404.html#popup < tuto.

    Exemple : http://lehollandaisvolant.net/tuto/css/exemple3.html

    Si tu veux que ce soit "au passage de la souris", remplace simplement le "active" par "hover" dans le code.
    1
    1. bg62 Modérateur
      tu as noté "(IE 8 seulement)" as-tu un hack au moins pour IE7 ?
      et après vérification sous IE6 c'est vrai c'est affreux, c'est l'original qui passe mais surtout je viens de tester et :
      ça ne passe pas du tout sous IE8 ou 7, ni sous Chrome ... dommage !
      0
  2. le hollandais volant
    chez moi ça marche dans IE7 et 8. Tiens, chrome non… étrange…

    Tentes celui là : https://lehollandaisvolant.net/errors/404.html#popup_bulle

    ceux ci marchent sous IE7 et 8 et tout le reste http://lehollandaisvolant.net/tuto/css/exemple9.html
    0
    1. bg62 Modérateur
      là ok ça fonctionne sous FF, Chrome, IE 8 7 mais sous IE 5.5 & 6 non c'est juste le 'title' qui apparaît
      je pense que tu devrais essayer d"améliorer l'autre version qui possède title et alt, car là c'est valable pour les moteurs, mais pour des images, je ne pense pas que ça puisse passer ??? si tu y arrives (avec surtout alt, fais signe !!)
      @+
      0
    2. le hollandais volant
      @bg62en effet, si l'exemple8.html
      Mais si tu regardes bien, ce n'est pas le "title" mais bien un "span" ou un "div" qui devient le popup.

      et le 'title' n'est pas configurable, contrairement au div, sur quoi tu fais ce que tu veux.

      sinon, pour IE6 et 5.5, c'est pas la peine. IE6 ne comprend pas le "hover". Seul du javascript pourais faire ça.
      Mais je ne connais pas… google si.

      Je fait tout en CSS moi
      0
  3. adnanforum
    le holandais c'est toi qui la créer sur quel hébéregeur pliz
    0
    1. le hollandais volant
      oui, le site ci dessus, est entierrement de moi. Il est hébergé chez Webou.net
      0
      2. adnanforum
        c'est gratuit
        0
        1. le hollandais volant
          webou offre un service gratuit. et sans pub.

          Depuis peu, ils disposent d'un service payant aussi. On a le choix.
          C'est pas beau ça ?
          0
      3. pouvoir dachat
        exemple :

        <a href=""><img class="6" src="logo.png" alt="nom de l'image" /></a> Zoomer une image sans border

        img.6{border:none}
        a:hover img.6 {border:none; width:100px; height:100px}
        0
        1. le hollandais volant
          là ça marche car le "a" permet d'avoir un hover même sous IE6 je crois.

          Par contre, ce n'est pas W3C (car le HREF est vide)

          et si tu met un "#" dans le href, opera nous renvoie tout en haut de la page au clic (nombre de personnes cliquent accidentellement)
          0
      5. adnanforum
        Webou c'est fermer jusqua decembre
        0
        1. le hollandais volant
          50Mio d'espace…
          Oui, ils ont un problème en ce moment :(

          Mais y'a plein d'autres hébergeurs sinon : https://www.commentcamarche.net/faq/1624-choisir-le-meilleur-hebergeur-web-gratuit-ou-payant
          0
      6. pouvoir dachat
        le href c'était pour faire une image cliquable , au cas où , sinon enlève le.
        0
        2. adnanforum
          peut ton écrir du html/css dans un hébergeur php/mysql
          0
          1. le hollandais volant
            oui
            0
          2. bg62 Modérateur
            la question initiale étant : 
            Je souhaite qu'une image s'agrandisse lorsqu'elle est survolee par la souris, et qu'elle reprenne sa dimention d'origine lorsqu'elle n'est plus survolee par la souris.

            pourrais-tu poser la tienne dans un autre post, on finit par ne plus savoir où aller ici !
            merci
            0
        3. bg62 Modérateur
          pour notre hollandais volant:
          essaie de reprendre ton premier concept et de voir si tu peux le rendre compatible tous navigateurs ...
          mais il y a des différences entre les liens sur du texte et ceux sur une image !
          l'article de Pascale est une piste, mais elle coince aussi sur les problèmes de compatibilité ...
          à mon avis javaScript , oui, css ... pense pas !
          @+
          0
          1. notobe
            Ca dépend si tu veux que ça fonctionne avec IE6 aussi ou si on décide que les 20% de malheureux qui sont encore à utiliser ce triste navigateur n'ont pas le droit au zoom....

            Parce que sinon, sans se prendre la tête, un petit img:hover c'est carrément le plus simple !
            0
            1. le hollandais volant
              C'est ma philosophie aussi : les pécores qui sont encore à IE6, méritent pas les éffets CSS.

              Non seulement, leurs ordi n'est pas à jour de ce fait : ils sont vulnérables aux virus plus que les autres. Et les virus se propageant de pc en pc, ce sont eux qui font que l'internet déborde de Spam et de virus.

              en gros, ils sont des nids à virus pour les honetes internautes et pour ma part ne méritent pas les zoom sur les images.

              :-)
              0
            2. RAD ZONE Contributeur
              @le hollandais volantSALUT

              D accord avec toi sur le principe !! ;-))

              mais il faut aussi penser au pc d entreprise qui pour des raison de compatibilite avec certain prog instale ne veulent pas changer de navigateurs ou ne peuvent pas changer:!!
              0
          2. sp00m`
            Sinon, t'as simplement un attribut onmouseout : 

            <img src="chemin/vers/image" alt="" onmouseover="this.height='200px'; this.width='500px'" onmouseout="this.height='100px'; this.width='250px'" />
            0
            1. notobe
              Du pur javacript comporte les mêmes écueils que du pur CSS : on désactive le js (perso ça m'arrive souvent quand j'en ai marre des pubs intrusives) et pouf : plus de zoom.
              0
            2. bg62 Modérateur
              @notobe
              et pouf : plus de zoom.

              ??? pas avec du 'pur css' comme tu en parles !
              mais avec le css il y a d'autres problèmes ...
              quant aux 'popups' qui s'ouvriraient je sais que cela fait " chi.. " mais la solution n'est pas de désactiver le JavaSrcipt ...
              0
            3. notobe
              @bg62Ahem.. ;) : je parle du javascript désactivé en commentaire à la solution "pur js" de spoom...
              En d'autres termes : si on désactive le js, on n'a plus de zoom avec une solution qui ne repose que sur le js.

              On donc le même pb (pas de zoom) qu'avec une solution pur CSS en cas de désactivation ou non prise en charge (ou prise en charge partielle) des CSS.
              0
          3. louis1984 Auteur
            Merci bcp pour vos commentaires. Une derniere question:

            J'ai une colonne composee d'images. Comment faire pour que les images ne se decallent pas vers le bas a chaque fois qu'une image est agrandie au passage de la souris? J'aimerais que l'image agrandie deborde legerement sur l'image du dessus et l'image du dessous sans decaller les autres images..

            Est-ce possible? Si oui comment faire?

            Merci par avance.
            0
            1. le hollandais volant
              Oui c'est possible, mais tu as utilisé le javascript ou le CSS ?

              Si ton truc est en CSS, utilise le positionnement relative ou absolute lors de l'agrandissement.
              0
              1. PhP
                Bjr

                Question de point de vue !
                Pour moi le CSS doit se cantonner à ce pourquoi il est fait à savoir : le rendu.
                Avec cette règle : jamais aucun hack dans le code CSS ou je ne l'utilise pas !

                Pour tout le reste je passe par le Javascript :-)
                L'utilisateur a désactivé Javascript ? C'est son droit j'espère seulement qu'il a aussi désactivé les activeX et les anims Flash lol

                Sinon je dois avoir un script qui zoom une image en Javascript évidemment what else ?
                0
                1. louis1984 Auteur
                  Bonjour PhP,

                  Pourrais-tu me filer ton script javascript?

                  Merci
                  0

                  Discussions similaires

                  Retrouver l'image originale d'une photo modifiée
                  Raven

                  10 réponses