Zoom image site [Résolu/Fermé]

Signaler
Messages postés
34
Date d'inscription
vendredi 15 avril 2011
Statut
Membre
Dernière intervention
18 janvier 2012
-
Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
-
Bonjour, je voudrais lorsque que l'on passe la souris sur les images de mon site que sa face un effet zoom mai le soucie introuvable et je compte sur vous pour pouvoir m'aider merci.


4 réponses

Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
2 577
Bonjour,
mai le soucie introuvable : Introuvable???
Messages postés
34
Date d'inscription
vendredi 15 avril 2011
Statut
Membre
Dernière intervention
18 janvier 2012
1
Je vien d'insérer ce code dans mes CSS et lorsque que je passe la souris sur mes image toujours pareille.

.zoom {
height:400px;
}
.zoom p {
text-align:center;
}
.zoom img {
width:200px;
height:267px;
}
.zoom img:hover {
width:300px;
height:400px;
}
Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
2 577
Ok pour le CSS. Peux t'on voir le html correspondant?
Messages postés
34
Date d'inscription
vendredi 15 avril 2011
Statut
Membre
Dernière intervention
18 janvier 2012
1
HTML ?
Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
2 577
Ben oui, le code de ta page.
Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
2 577
Bon ok. On n'est pas sorti du sable.
Tu codes tes pages avec quoi? quel logiciel? quel langage?
Fais cet essai :
1- ouvrir le bloc notes
2- copier-coller ce css dans la page du bloc note :
.zoom {  
height:400px;  
}  
.zoom p {  
text-align:center;  
}  
.zoom img {  
width:200px;  
height:267px;  
}  
.zoom img:hover {  
width:300px;  
height:400px;  
}

3- enregistrer sous : monstyle.css
4- ouvrir une nouvelle feuille du bloc note
5- copier-coller ce code html dans la nouvelle page du bloc note
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
<head> 
     <title>Mon site il est génial!!!!</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <link rel="stylesheet" media="screen" type="text/css" title="Design" href="monstyle.css" /> 
</head> 
<BODY> 
<div class="zoom"> 
    <p> 
        <img src="poisson-rouge.jpg"/> 
    </p> 
</div> 
</body> 
</html> 
6- enregistrer sous (dans le même répertoire que le css ci-dessus) : index.html
7- enregistrer sous "poisson-rouge.jpg", dans le même répertoire que les 2 fichiers précédents l'image ci-jointe
8- tester

ci-joint le répertoire exemple à dézipper...
Messages postés
34
Date d'inscription
vendredi 15 avril 2011
Statut
Membre
Dernière intervention
18 janvier 2012
1
Je ne code rien le site et deja prés. J'ai une page CSS.
Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
2 577
Je ne peux donc pas t'aider davantage.
Messages postés
34
Date d'inscription
vendredi 15 avril 2011
Statut
Membre
Dernière intervention
18 janvier 2012
1
Ya bien un un code CSS que j'insérer dans ma page pour que lon passe la souris sur mes image que sa face un effet zoom.
Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
2 577
oui, mais il faut que ta page html y fasse référence...
teste l'exemple que je t'ai mis plus haut...
Messages postés
34
Date d'inscription
vendredi 15 avril 2011
Statut
Membre
Dernière intervention
18 janvier 2012
1
Bloc note ?
Messages postés
12248
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
3 mars 2021
2 577
laisse tomber l'explication. Télécharges le zip et teste.
Ensuite, pour voir comment c'est fait, pour les 2 fichiers (index.html et monstyle.css) clic droit/ouvrir avec /Bloc Notes...