Partage
  • Partager sur Facebook
  • Partager sur Twitter

image s'aggrandissant au survol de la souris

    31 décembre 2008 à 16:28:57

    Bonsoir!
    je suis entrain de réaliser un site de e-commerce( d'exposition). j'aimerai que, lorsque l'utilisateur pointe la souris sur une des images en exposition, celle ci s'aggrandit(mais la minuature restant toujours à sa place) pour qu'il puisse mieux la voir. Le hic c'est que je ne sais comment faire! pourriez vous m'aider?
    Merci!!!
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      31 décembre 2008 à 16:38:05

      créer un div (dhtml) dans lequel tu met l'image en taille réelle (ou simplement moins réduite), et tu le positionne de manière absolue, avec les coordonnées de la souris, ou simplement par rapport à la miniature. Tu contrôle sont affichage avec les évènements onmouseover et onmouseout.
      • Partager sur Facebook
      • Partager sur Twitter
        31 décembre 2008 à 16:45:50

        En posant la question c'est parce que j'étais désespérer.Ne peux tu pas me montrer un échantillont de tout ce dont tu à parler par la pratique?
        Merci!
        • Partager sur Facebook
        • Partager sur Twitter
          31 décembre 2008 à 16:52:24

          Il y a plusieurs alternatives possibles :
          1. un système de lightbox qui ouvre l'image en grand (exemple)
          2. un système d'infobulle (exemple)
          3. un système de zoom au survol en javascript (j'en ai pas sous la main et vu que tu ne souhaites visiblement pas coder toi-même, je ne pense pas que ce soit la bonne alternative)
          4. un simple CSS qui agrandit l'image... mais dans ce cas, ça décalerait tout son site, alors bof ^^

          En clair, si tu ne veux pas coder toi-même mais utiliser un système existant, les plus simples à mettre en place sont probablement les lightbox et infobulles.
          • Partager sur Facebook
          • Partager sur Twitter
            31 décembre 2008 à 16:56:47

            Tout à fait d'accord avec les lightbox en plus il y en a beaucoup de différentes donc tu pourra facilement faire ton choix ;) Qui plus est de tout les systèmes proposé c'est le plus "vendeur" à mon sens.

            @Elias : il y a moyen de changer ça avec le CSS sans déformer le design, je l'ai déjà vu ;) Il faut juste joué avec les marges & Cie. J'ai un doute en fait.
            • Partager sur Facebook
            • Partager sur Twitter
              31 décembre 2008 à 17:03:12

              Oui, mais du coup ça implique soit de mettre quelque chose de spécifique à chaque image (donc long à mettre en place, pas top), soit automatiser les calculs des tailles réelles de l'image, placement de la grande image, etc (automatiser => passer par du javascript). Tout à fait faisable, mais ne semble pas correspondre aux attentes de berthy pour ce qui est de la simplicité de la mise en place :p
              Bon là du coup je suis tenté, je verrai demain si j'expérimente une automatisation du genre, mais pour l'instant, y a un nouvel-an à fêter :D
              • Partager sur Facebook
              • Partager sur Twitter
                2 janvier 2009 à 3:07:41

                J'ai fait un petit test d'images s'affichant en grand au survol, au même endroit, mais... j'trouve pas ça très intuitif. Tant l'ouverture au survol que la fermeture ne me plaisent pas tant : l'ouverture par simple survol est intrusive, il vaut mieux ouvrir lors d'un clic (assurément volontaire), et la fermeture implique de quitter l'image agrandie avec le curseur, pas top.
                Je te conseille donc de te diriger vers les lightbox ou les infobulles ;)

                Si jamais, mon test est ici : http://twiip.ch/share/zoomover/
                • Partager sur Facebook
                • Partager sur Twitter
                  2 janvier 2009 à 20:09:27

                  @Elias : pour info je pensais plus à ça http://browsershots.org/screenshots/ (qui en fait est en JS) qui choque moins qu'une apparition brutale ;) Mais bon les lightbox sont faites pour ça ^^
                  • Partager sur Facebook
                  • Partager sur Twitter

                  image s'aggrandissant au survol de la souris

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur
                  • Markdown