Zoom sur photo en html
Résolu/Fermé
A voir également:
- Zoom sur photo en html
- Partage photo - Guide
- Photo aérienne de ma maison - Guide
- Traduction photo gratuit - Guide
- Editeur html - Télécharger - HTML
- Photo de profil - Guide
7 réponses
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 504
27 déc. 2010 à 17:27
27 déc. 2010 à 17:27
(Re)salut.
Je t'avais déjà répondu dans ton autre sujet :
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
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
MastercroW
Messages postés
1094
Date d'inscription
dimanche 3 octobre 2010
Statut
Membre
Dernière intervention
31 mai 2019
163
27 déc. 2010 à 14:45
27 déc. 2010 à 14:45
Hello,
Ceci s'appelle un LightBox, tu peux retrouvé ceci sur : http://blog.bouctoubou.com/13-javascripts-lightbox-images-galeries-videos/
Ceci s'appelle un LightBox, tu peux retrouvé ceci sur : http://blog.bouctoubou.com/13-javascripts-lightbox-images-galeries-videos/
bg62
Messages postés
23654
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
8 novembre 2024
2 385
27 déc. 2010 à 20:30
27 déc. 2010 à 20:30
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 ?
:-)
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 ?
:-)
c celui là que je choisi ,,j'en suis sur
faut juste savoir comme y' accéder en html
https://www.unesourisetmoi.info/magic/exemple12.php
et
ce lien c possible d'avoir les 2 choix ?????? car c ça qu'il me faut
faut juste savoir comme y' accéder en html
https://www.unesourisetmoi.info/magic/exemple12.php
et
ce lien c possible d'avoir les 2 choix ?????? car c ça qu'il me faut
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 504
27 déc. 2010 à 23:08
27 déc. 2010 à 23:08
Voilà d'où vient le script utilisé par bg62 :
https://www.magictoolbox.com/magiczoom/
Et voilà comment l'intégrer :
https://www.magictoolbox.com/magiczoom/integration/
https://www.magictoolbox.com/magiczoom/
Et voilà comment l'intégrer :
https://www.magictoolbox.com/magiczoom/integration/
bg62
Messages postés
23654
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
8 novembre 2024
2 385
28 déc. 2010 à 10:09
28 déc. 2010 à 10:09
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 ... :-)
mais que veux-tu dire 'avoir les 2 choix' ?
dans ce cas mieux vaut prendre le codage de la seconde image ... :-)
magicshark
Messages postés
402
Date d'inscription
mardi 27 juillet 2010
Statut
Membre
Dernière intervention
6 mai 2014
13
27 déc. 2010 à 21:18
27 déc. 2010 à 21:18
en css faire un
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
Modifié par notobe le 27/12/2010 à 21:30
Modifié par notobe le 27/12/2010 à 21:30
hummm, c'est le lien que j'ai donné en dessous...
Et c'est :hover pas .hover... ;)
Et c'est :hover pas .hover... ;)
Utilisateur anonyme
28 déc. 2010 à 16:47
28 déc. 2010 à 16:47
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>
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>
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
28 déc. 2010 à 17:35
28 déc. 2010 à 17:35
Non.
Pas de doctype, pas de charset, attributs exotiques.
Pas de doctype, pas de charset, attributs exotiques.
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
28 déc. 2010 à 17:47
28 déc. 2010 à 17:47
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
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
bg62
Messages postés
23654
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
8 novembre 2024
2 385
28 déc. 2010 à 18:39
28 déc. 2010 à 18:39
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 ...
27 déc. 2010 à 20:22
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
27 déc. 2010 à 20:37
Sinon, par le même auteur, y'a encore plus simple :
http://css.mammouthland.net/zoomer-une-image-avec-css.php#tech_1
27 déc. 2010 à 21:25
FireFox
MSIE 7 +
Mozilla / SeaMonkey
Opéra 7 +
Safari
ce qui n'est pas mon cas merci comme mm
27 déc. 2010 à 21:27
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...)
27 déc. 2010 à 21:32