Zoom sur photo en html

Résolu
Utilisateur anonyme -  
 Utilisateur anonyme -
Bonjour,

voila ,je ne c pas si je vais être claire mais bon

j'ai des photo dans le sens horizontale j'ai mis une barre de défilent toutjour dans le mm sens et le petit plus que j'aimerai faire en html
c'est de pouvoir ,en passant la sourie sur les photo que la photo s'agrandi comme un zoom

j'éspère que vous voyer ou je veut ne venir


merci pour les aide ,j'adoreeee

--

quand c'est résolu ,merci de le signifier et d'expliquer grâce a quoi cela l'a été (voir 1er message)

>> Un +1 a coté d'une réponse qui vous a été utile peut permettre d'aider les autres...

svp répondez vite !

7 réponses

Résumé de la discussion

L'objectif est d'obtenir un effet zoom au survol des images horizontales dans une galerie HTML, et sur des solutions comme lightbox ou agrandissement par survol. Des solutions incluent le lightbox (shadowbox), des scripts JS ou CSS pour le survol, et des plugins spécialisés comme Magic Zoom. Plusieurs propositions détaillent des liens vers des démonstrations et des tutoriels, des exemples d'intégration et des précautions de compatibilité navigateur, notamment pour Firefox, MSIE et autres environnements Windows XP. Des échanges complémentaires évoquent des extraits de code et des exemples d'intégration tout en soulignant la nécessité de vérifier la compatibilité avec les navigateurs anciens et les configurations spécifiques, comme XP.

Généré automatiquement par IA
sur la base des meilleures réponses
  1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    (Re)salut.

    Je t'avais déjà répondu dans ton autre sujet :
    "Pour l'agrandissement, tu as plusieurs solutions : lightbox, info-bulle, agrandir les dimensions, etc."

    Si tu choisis la lightbox, je te conseille shadowbox.

    Pour l'info-bulle, voici un script JS :
    http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

    En remplaçant l'image (sans zoom) par une de même taille avec zoom :
    https://openweb.eu.org/articles/zoom_image

    Pour le zoom en agrandissant les dimensions au survol :
    http://randsco.com/_miscPgs/cssZoomPZ3.html
    3
    1. Utilisateur anonyme
       
      https://openweb.eu.org/articles/zoom_image c'est ce site que g choisi

      avec comme Code (X)HTML:


      <div class="zoom1">
      <p>
      <a href="/articles/zoom_image#"
      title="photo d'un papillon machaon butinant une fleur">
      </a>
      </p>
      </div>

      aparament ça correspond a ce que je chercher c.a.d un zoom quand la sourie passe dessus !

      mais les <a href=
      title=
      je voie pas a quoi ça correspond :O
      0
    3. Utilisateur anonyme
       
      sauf que ça fonionne avec

      FireFox
      MSIE 7 +
      Mozilla / SeaMonkey
      Opéra 7 +
      Safari

      ce qui n'est pas mon cas merci comme mm
      0
    4. notobe Messages postés 2222 Statut Membre 213
       
      hein ? Tu as quoi comme navigateur ? Netscape 4.7 ? :-D
      Cette méthode fonctionne avec tous les navigateurs sauf... IE6 (die IE6, die) utilisé à présent par moins de 5% des internautes en France (ouf...)
      0
    5. Utilisateur anonyme
       
      google chrome ;)
      0
  3. bg62 Messages postés 23433 Date d'inscription   Statut Modérateur Dernière intervention   2 435
     
    plusieurs exemples, avec les sources :
    https://www.unesourisetmoi.info/zoom/index.php
    https://www.unesourisetmoi.info/magic/index.php
    et ce que tu cites d'après openweb.eu en bas de cette page:
    https://www.unesourisetmoi.info/pages/galeries.php
    il y a le choix là, non ?
    :-)
    0
    2. Utilisateur anonyme
       
      ta une idéés ???
      0
    5. bg62 Messages postés 23433 Date d'inscription   Statut Modérateur Dernière intervention   2 435
       
      d'origine ; https://www.magictoolbox.com/magiczoom/
      mais que veux-tu dire 'avoir les 2 choix' ?
      dans ce cas mieux vaut prendre le codage de la seconde image ... :-)
      0
  4. magicshark Messages postés 445 Statut Membre 13
     
    en css faire un 
    img.hover
{
width: NOMBRE SUPERIEUR DE PIXELpx;
height:IDEMpx;
}

    si a l'origine tu as 100px et 50px avec le hover mettre 200px et 100px l'image gardera ses proportions et sera deux fois plus grandes
    0

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

    Posez votre question
  6. notobe Messages postés 2222 Statut Membre 213
     
    hummm, c'est le lien que j'ai donné en dessous...
    Et c'est :hover pas .hover... ;)
    0
  7. Utilisateur anonyme
     
    juste une question dans ce cas est qe que ce code est bon ?

    html>
    <head>
    <title>zoom sur photo</title>

    <!-- link to magiczoomplus.css file -->
    <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
    <!-- link to magiczoomplus.js file -->
    <script src="http://static.blogstorage.hi-pi.com/photos/trinitydeco.designblog.fr/images/gd/1219760993/Canape-d-angle-cuir-noir-a-capitons-l-indispensable.jpg.js" type="text/javascript"></script>

    </head>
    <body>

    <p>Combine related images using hotspots.</p>

    <!-- define Magic Zoom Plus -->
    <a href="angle-g-convertible-excellence-rouge-griotte-chicago-19263629.jpeg" class="MagicZoomPlus" rel="hotspots: hd-spots" title="angle convertible rouge"><img src="angle-g-convertible-excellence-rouge-griotte-chicago-19263629.jpeg"/></a> <br/>

    <!-- define hotspots. Each hotspot expands with different effect -->
    <div id="hd-spots" class="MagicHotspots">
    <a href="angle-g-convertible-excellence-rouge-griotte-chicago-19263629.jpeg" coords="115,145,135,165" title="New Helical-Cut 5th Gear" class="MagicThumb"></a>
    <a href="angle-g-convertible-excellence-rouge-griotte-chicago-19263629.jpeg" coords="130,75,196,110" title="Tank" class="MagicThumb"></a>
    <a href="angle-g-convertible-excellence-rouge-griotte-chicago-19263629.jpeg" coords="75,120,85,140" title="Rear Shocks" class="MagicThumb"></a>
    </div>

    </body>
    </html>
    0
    1. notobe Messages postés 2222 Statut Membre 213
       
      Non.
      Pas de doctype, pas de charset, attributs exotiques.
      0
    2. Utilisateur anonyme
       
      quoi ???*


      lol
      0
    3. notobe Messages postés 2222 Statut Membre 213
       
      Et voilà... "quoi ?" Tout est dit !! ^^
      Sans rire ilana, il faut vraiment que tu commences par le commencement.

      Vas voir le site du zéro...
      Et puis là pour le doctype
      http://css.mammouthland.net/balises-html.php#xhtml
      Ici pour le charset
      https://www.alsacreations.com/astuce/lire/34-charset-iso-8859-1-iso-8859-15-utf-8-lequel-choisir.html
      Ici pour les attributs
      https://www.la-grange.net/w3c/html4.01/index/attributes.html

      Tout cela, c'est du B-A-BA
      0
    4. Utilisateur anonyme
       
      ouè c juste le faite d'avoir presque fini ok

      merci
      0
  8. bg62 Messages postés 23433 Date d'inscription   Statut Modérateur Dernière intervention   2 435
     
    pourtant quand j'enregistre et que j'ouvre internet pour voire ce que ça donne un resultat que j'attendent

    ben non !!!
    ferme tout, nettoie ton cache internet et tu verras que rien n'est bon ...
    0
    1. Utilisateur anonyme
       
      ok
      0