Comment faire une galerie css simple ?
Fermé
raphituc
Messages postés
159
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
23 octobre 2013
-
2 mars 2012 à 13:39
razily Messages postés 250 Date d'inscription lundi 9 mars 2009 Statut Membre Dernière intervention 4 décembre 2013 - 2 mars 2012 à 15:45
razily Messages postés 250 Date d'inscription lundi 9 mars 2009 Statut Membre Dernière intervention 4 décembre 2013 - 2 mars 2012 à 15:45
A voir également:
- Comment faire une galerie css simple ?
- Galerie photo en ligne gratuite - Guide
- Simple ocr - Télécharger - Bureautique
- Iphone 14 simple - Guide
- Simple file locker - Télécharger - Sécurité
- Télécharger une vidéo youtube dans sa galerie - Guide
4 réponses
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
Modifié par dariumis le 2/03/2012 à 14:00
Modifié par dariumis le 2/03/2012 à 14:00
Salut, d'après moi, au moment ou tu change le width de l'image, lors du survol de celle-ci par la sourie, je pense qu'il faut aussi à ce moment là, la passer en position:absolute (css).
raphituc
Messages postés
159
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
23 octobre 2013
11
2 mars 2012 à 14:03
2 mars 2012 à 14:03
J'ai essayé, ça ne marche pas, ça bloque même l'effet d'agrandissement.
Mais je vous met le code dans le message suivant.
Mais je vous met le code dans le message suivant.
raphituc
Messages postés
159
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
23 octobre 2013
11
2 mars 2012 à 14:04
2 mars 2012 à 14:04
Le Code CSS :
body {
margin:0;
text-align: center;
}
#images1{
text-align: center;
width:624px;
height:150px;
}
#images1 img{
height:141px;
width:200px;
text-align: center;
position:relative;
box-shadow: 0px 0px 0px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
#images1 img:hover{
height:161px;
width:240px;
position:absolute;
box-shadow: 0px 0px 7px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
body {
margin:0;
text-align: center;
}
#images1{
text-align: center;
width:624px;
height:150px;
}
#images1 img{
height:141px;
width:200px;
text-align: center;
position:relative;
box-shadow: 0px 0px 0px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
#images1 img:hover{
height:161px;
width:240px;
position:absolute;
box-shadow: 0px 0px 7px #8e8e8e;
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
}
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
2 mars 2012 à 14:08
2 mars 2012 à 14:08
ha ok, je pensais que tu le faisait en javascript, d'après moi faut le faire en javascript, en utilisant onMouseOver(), onMouseOut().
raphituc
Messages postés
159
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
23 octobre 2013
11
2 mars 2012 à 14:09
2 mars 2012 à 14:09
Mince, je ne connais rien en javascript. Et puis, je pense ne pas être loin de la solution, mais merci pour votre aide.
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
Modifié par dariumis le 2/03/2012 à 14:20
Modifié par dariumis le 2/03/2012 à 14:20
c'est pas compliquer, il faut que tes images possède des id différents (j'écris les code à la volé donc y'aura peut être de erreurs):
Puis dans le code javascript que tu peux placer dans le head de ta page entre les balise script:
Je pense que ce code est un bon point de départ.
<img onmouseover="agrandi('image1')" onmouseout="reduit('image1')" id="image1" src="x.jpg"/>
<img onmouseover="agrandi('image2')" onmouseout="reduit('image2')" id="image2" src="y.jpg"/>
Puis dans le code javascript que tu peux placer dans le head de ta page entre les balise script:
function agrandi(id){
var img=document.getElementById(id);
img.style.width="400px";
img.style.position="absolute";
}
function reduit(id){
var img=document.getElementById(id);
img.style.width="50px";
img.style.position="relative";
}
Je pense que ce code est un bon point de départ.
razily
Messages postés
250
Date d'inscription
lundi 9 mars 2009
Statut
Membre
Dernière intervention
4 décembre 2013
2
2 mars 2012 à 15:45
2 mars 2012 à 15:45
le mieux c de voir du côté jquery !!
