NPDS : Gestion de contenu et de communauté
Content & Community Management System (CCMS) robuste, sécurisé, complet, performant, parlant vraiment français, libre (Open-Source) et gratuit.
33 visiteur(s) et 0 membre(s) en ligne.
Autres infos
Activité du Site
Pages vues depuis 25/05/2001 : 108 401 260
- Nb. de membres 8 693
- Nb. d'articles 1 695
- Nb. de forums 26
- Nb. de sujets 8
- Nb. de critiques 92
Index du forum »» Questions fréquentes »» Agrandir images au clic de la souris
Nouveau sujet
Agrandir images au clic de la souris#25723Répondre
3Contributeur(s)
3 Modérateur(s)
fouineur
Ici le principe c'est que vous ayez toujours la même taille d'image sur vos pages.
Au clic de la souris sur l'image vous trouverez la taille d'origine de l'image sans quitter votre page.
1.Ouvrez le fichier themes/votretheme/style/style.css
Mettre ceci en bas de page :
div.popup {
height: 200px;
width: 260px;
}
div.popup > img {
height: 100%;
width: 100%;
cursor: pointer;
}
div.popup > img:active {
height: auto;
width: auto;
position: relative;
border: black solid 1px;
}
enregistrer fermer.
Ici la taille seras de 260 sur 260 rien vous empêche de changer la taille que vosu désirez ;-)
2.Dans vos pages , articles, etc.. faite appel comme ceci :
<div class="popup"><img title="clique sur l'image pour agrandir !" src="Votre dossier image/Nom de l'image.jpg" alt="texte_alternatif" /></div>
Quoi déjà fini :-P
Au clic de la souris sur l'image vous trouverez la taille d'origine de l'image sans quitter votre page.
1.Ouvrez le fichier themes/votretheme/style/style.css
Mettre ceci en bas de page :
div.popup {
height: 200px;
width: 260px;
}
div.popup > img {
height: 100%;
width: 100%;
cursor: pointer;
}
div.popup > img:active {
height: auto;
width: auto;
position: relative;
border: black solid 1px;
}
enregistrer fermer.
Ici la taille seras de 260 sur 260 rien vous empêche de changer la taille que vosu désirez ;-)
2.Dans vos pages , articles, etc.. faite appel comme ceci :
<div class="popup"><img title="clique sur l'image pour agrandir !" src="Votre dossier image/Nom de l'image.jpg" alt="texte_alternatif" /></div>
Quoi déjà fini :-P
Message édité par : fouineur / 25-01-2013 23:41
fouineur
De rien
Juste une petite modification car sur certains navigateurs un bug l'image s'agrandisais sur elle même
Le rectification à été fait directement sur le premier post
Du coup c'est compatible ie , chrome, firefox je supose que le reste ne posera pas de souci non plus
Le bug était au niveau de l'appel auquel j'avait mis " style="margin-right: auto; margin-left: auto; display: block;"
soucis sous chrome display: block ne fonctionnait qu'une fois sur deux le reste des navigateur j'avais pas de souci !
Juste une petite modification car sur certains navigateurs un bug l'image s'agrandisais sur elle même
Le rectification à été fait directement sur le premier post
Du coup c'est compatible ie , chrome, firefox je supose que le reste ne posera pas de souci non plus
Le bug était au niveau de l'appel auquel j'avait mis " style="margin-right: auto; margin-left: auto; display: block;"
soucis sous chrome display: block ne fonctionnait qu'une fois sur deux le reste des navigateur j'avais pas de souci !
Message édité par : fouineur / 26-01-2013 00:02
Anonyme
Souvent les photos ne sont pas carrées. Comment ne définir que la hauteur (ex: 500px) et que l'image garde ses proportions?
Merci d'avance,
Sylvain.
Merci d'avance,
Sylvain.