Agrandir des images au clic souris

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

6 réponses

Profil bloqué
 
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"/>
0
ama
 
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
0
bg62 Messages postés 26248 Date d'inscription   Statut Modérateur Dernière intervention   2 429
 
mieux vaut faire ça avec css ou javascript, car les popups sont très mal vus ....
:-)
0
arthezius Messages postés 3756 Statut Membre 475
 
Sinon peut être avec z-index pour quelle passe devant les autres au lieu de les décaler...
0
ama
 
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
0

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

Posez votre question
arthezius Messages postés 3756 Statut Membre 475
 
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
0
Profil bloqué
 
Comme l'a dit bg62 cherchez plutot un code javascript vous permettant d'afficher une gallerie complète
0