28172 sujets

CSS et mise en forme, CSS3

(RESOLU) Zoom sur une partie image

Bonjour à tous;

je cherche depuis environ 13h00 comment faire un zoom sur une image et que celui-ci m’affiche le zoom de l'emplacement souhaiter par un positionnement précis dans l'emplacement d'origine de l'image. Un peu comme ICI sur l'image du bas.


<!DOCTYPE html>
      <html lang="fr">
           <head>
                <meta charset="utf-8" />
                <link href="css/modern.css" rel="stylesheet" type="text/css"/>
                <link rel="icon" type="image/png" href="favicon.png" />
                <meta name="robots" content="noindex">
		<title>Menu secondaire</title>
		<meta name="description" content="" />

<style type="text/css">

.zoom {
width: 800px; /*taille du block*/
height:600px; /*taille du block*/
background-color: red; /*rendre l'espace visible le temps du travail*/
}

img.displayed {
width : 800px;/*taille image*/
height : 600px;;/*taille image*/
}



</style>
	</head>
<body>

<div class="zoom">
<a href="image.jpg"><img class="displayed" src="image_resize.jpg" alt="ma_photo" title="Ma Photo" /></a>
</div>

<br />
<br />
			
	</body>
</html>

Modifié par brunoh88 (09 Feb 2015 - 21:52)
Bonsoir,

en général , ceci est fait en JavaScript.

En css tu vas trouvé des trucs approximatifs avec du code redondant.
Il est même possible de faire sans images <img/> et ainsi ne pas avoir de contenu.
Voici un exemple qui ne sert qu'a démontrer une betise : http://codepen.io/gc-nomade/pen/ogoqWa/
pourquoi vous ne reprenez pas la technique de la page ?
http://openweb.eu.org/IMG/article37/#technique3

Après étude sur la page il y a 3 fichiers images dont certaines contiennent plusieurs images ( sprite)
1- machon.jpg 400x300
http://openweb.eu.org/IMG/article37/machaon.jpg

2- machon1.jpg est une image sprite ( 2 en 1 ) 400x600
http://openweb.eu.org/IMG/article37/machaon1.jpg

3-machon2.jpg est une image sprite 300*450
http://openweb.eu.org/IMG/article37/machaon2.jpg
Est la seule image utile pour le cas 3 "variant " celle du bas

Pour le dernier cas variant voici le code css hml pris depuis le site
Vous devez créer une image contenant 2 images et adapté les valeurs css en fonction de la taille de votre /vos images .
Le hover translate l image affiché vers le haut ( contenant 2 images) 225 px et donc l image du haut disparait et l image du bas apparait !? 


<div class="zoom1_bis">
    <p>
         <a href="#" title="photo d'un papilio machaon butinant une fleur"></a></p>
</div>





//pour le div
.zoom1_bis {
width: 300px;
height: 225px;
background: url(machaon2.jpg);
background-repeat: no-repeat;
margin: 0 auto;
}
//pour le p 
.zoom1_bis p, .zoom1_bis a {
height: 225px;
display: block;
margin: 0 auto;
}

//pour le a 
.zoom1_bis p, .zoom1_bis a {
height: 225px;
display: block;
margin: 0 auto;
}
//pour le a:hover 
.zoom1_bis a:hover {
background-image: url(machaon2.jpg);
background-position: 0px -225px;
background-repeat: no-repeat;
cursor: help;
}


etude de la specificité
.zoom1_bis p [0,0,1,1]
.zoom1_bis a [0,0,1,1]
.zoom1_bis a:hover [0,0,2,1]

Etude du cas 1 ci dessous
la taille de image originale est different de la taille sur la page avec ou sans le hover
en blue l image contenant les 2 images
en rouge image sur la page sans ( A) et avec hover ( B)
upload/48731-alsapaillo.png
Modifié par 75lionel (09 Feb 2015 - 00:10)
Bonjour
Votre première question ne mentionnait pas de la façon de l 'implémenter . Maintenant vous donner un autre liens qui contient la réponse !!

Liens
1er lien cliquer sur image ouvre une image plus grande statique
2eme lien mettre la souris dessus l image a 2 actions
-le click est disable et est "remplacé" par un zone attachée à la souris qui se met a jour lorsque celle ci bouge .
-une zone s affiche ( dans une endroit parfois peu visible selon la taille du navigateur ) montrant en zoom la partie de l' image situé dans la zone de la souris .

Le deuxième lien contient le lien pour le code javascript ; il suffit de lire la documentation pour utiliser ce plug in avec jquery . Tout est possible dans le web , plusieurs techniques différentes pour un même résultat visuel . ......

Cdt
Modifié par 75lionel (09 Feb 2015 - 17:48)
Merci à vous pour les conseils et votre aide, j'ai enfin réussi.
Le seul problème qui me gène, c'est de designer un lien pour afficher une image, mais il n'y as pas le choix apparemment.
Problème résolu grâce à vos explication et au lien cité plus haut !!!
Sujet clos
Aller à