Agrandir des images au clic souris
ama
-
Profil bloqué -
Profil bloqué -
BonsoiR
ok après avoir mis ce codage (css):
p.popup {
height: 150px;
width: 200px;
}
p.popup > img {
height: 80%;
width: 80%;
cursor: pointer;
}
p.popup > img:hover {
height: auto;
width: auto;
position: relative;
border: black solid 1px;
}
code HTML:
<p class="popup"
<img src="espacedeliberte/CIMG4747e.jpg" alt="47e" />
<img src="espacedeliberte/CIMG4756e.jpg" alt="56e" />
</p>
mes images s'agrandissent au passage de la souris !OK ! seulement elles ne se suivent plus comme je l'avais souhaité au départ....elles reviennent chacune à la ligne.....
comment les mettre à la suite...multi merci si qq1 réppond!!!!
ama
ok après avoir mis ce codage (css):
p.popup {
height: 150px;
width: 200px;
}
p.popup > img {
height: 80%;
width: 80%;
cursor: pointer;
}
p.popup > img:hover {
height: auto;
width: auto;
position: relative;
border: black solid 1px;
}
code HTML:
<p class="popup"
<img src="espacedeliberte/CIMG4747e.jpg" alt="47e" />
<img src="espacedeliberte/CIMG4756e.jpg" alt="56e" />
</p>
mes images s'agrandissent au passage de la souris !OK ! seulement elles ne se suivent plus comme je l'avais souhaité au départ....elles reviennent chacune à la ligne.....
comment les mettre à la suite...multi merci si qq1 réppond!!!!
ama
Configuration: Windows XP Firefox 3.0.15
6 réponses
-
Bonjour, vous pouvez placer un style="float:left", en general dans le code de la 1e image.
Par exemple <img src="espacedeliberte/CIMG4747e.jpg" alt="47e" style="float:left"/> -
ok ca fonctionne seulement j ai environ une trentaine d'images à faire suivre sur ma page de telle façon à ce que chacune d'elle ne se chevauche pas ...alors cette solution reste approximative pour que chaque image se cale correctement sur ma page
J ai trouvé une solution. c'est un peu laborieux et c'est une solution quand même.....
je programme une class pour l emplacement de chaque image ex
.popup1> img {
...
margin-left: 82%;
margin-top: -900%;
}
et je peux mettre chaque image cote à cote
bien je continue comme même si je pense qu'il solution plus simple
dailleur si qq1 a cette solution plus simple
mi je veux bien car sinon je ne suis pas couché!!!
merci en tous cas de ta réponse toujours encourageante
ama -
mieux vaut faire ça avec css ou javascript, car les popups sont très mal vus ....
:-) -
Sinon peut être avec z-index pour quelle passe devant les autres au lieu de les décaler...
-
bonjour
je ne comprends pas très bien ce que tu me dis
ou dois je placer le z-index?
comment ?
j en suis à programmer chaque image: ex:
.popup0> img {
height: 80%;
width: 80%;
cursor: pointer;
margin-left: 0%;
margin-top: 31%;
}
seulement décalage à chaque fois ...
je cherche sol plus simple...
merci
-
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
z-index est un attribut CSS qui permet de mettre des éléments les uns devant les autres.
Avec ça tu devrai pouvoir ton image devant quand elle s'agrandi ce qui de décalera pas les autres vu qu'elles ne seront plus dépendante du positionnement et de la taille de celle qui s'agrandit.
https://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html -
Comme l'a dit bg62 cherchez plutot un code javascript vous permettant d'afficher une gallerie complète
