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
A voir également:

7 réponses

Réponse 1 / 7
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
(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
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
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Euh, ouais... en fait un <a href="#" title="description de l'image"> suffit.
Sinon, par le même auteur, y'a encore plus simple :
http://css.mammouthland.net/zoomer-une-image-avec-css.php#tech_1
0
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
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   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
Utilisateur anonyme
 
google chrome ;)
0
Réponse 2 / 7
MastercroW Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   163
 
Hello,
Ceci s'appelle un LightBox, tu peux retrouvé ceci sur : http://blog.bouctoubou.com/13-javascripts-lightbox-images-galeries-videos/
0
Réponse 3 / 7
bg62 Messages postés 23731 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
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
Utilisateur anonyme
 
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
0
Utilisateur anonyme
 
ta une idéés ???
0
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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/
0
Utilisateur anonyme
 
enfaite ça serai plus https://www.magictoolbox.com/magiczoomplus/
0
bg62 Messages postés 23731 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
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
Réponse 4 / 7
magicshark Messages postés 402 Date d'inscription   Statut Membre Dernière intervention   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

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

Posez votre question
Réponse 5 / 7
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
hummm, c'est le lien que j'ai donné en dessous...
Et c'est :hover pas .hover... ;)
0
Réponse 6 / 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
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Non.
Pas de doctype, pas de charset, attributs exotiques.
0
Utilisateur anonyme
 
quoi ???*


lol
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   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
Utilisateur anonyme
 
ouè c juste le faite d'avoir presque fini ok

merci
0
Réponse 7 / 7
bg62 Messages postés 23731 Date d'inscription   Statut Modérateur Dernière intervention   2 409
  
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
Utilisateur anonyme
 
ok
0