28173 sujets

CSS et mise en forme, CSS3

Affichage d'un "popup" en css

Bonjour, j'aimerais savoir s'il est possible de faire apparaitre une photo a dans une fenetre a part dimensionnée a la taille de la photo en cliquant sur une miniature

merci
A mon humble avis si tu souhaites ouvrir une nouvelle fenêtre, il faut regarder du côté de EcmaScript.

En css, il serait possible d'utiliser un span ou une div caché et de l'afficher lors du hover
ex :

a.miniature span{
display:none;
}
a.miniature:hover span{
display:block;
position...
}


Ou quelque chose dans ce goût là.
Salut,

Effectivement, si tu souhaites afficher une popup de la taille de l'image sur laquelle tu as cliqué, il te faudras utiliser un langage du type javascript. Le principe consiste à récupérer la taille (hauteur et largeur) de l'image sur laquelle tu as cliqué et d'attribuer ces dimensions à ta popup. J'avais trouver un script qui permettait de faire cela mais je n'arrives plus à remettre la main dessus.

EDIT: Ca y est j'ai retrouver le script Smiley star . Tu le trouveras à cette adresse

trasher a écrit :
En css, il serait possible d'utiliser un span ou une div caché et de l'afficher lors du hover

Pour compléter cela, voici un petit lien utile

Bonne continuation Smiley cligne
Modifié par ymhotepa (13 May 2006 - 22:48)
Modérateur
bonsoir,
Pour info, l'usage des pseudo element :active et focus peuvent rendre cette effet dans IE et Firefoxe, opera non:

<!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" lang="fr">
<head>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>
body {
	color:#0053D6;
}

 p.signe, p:first-letter {color:#576F0D;font-weight:bold;}
.montrecache {

	float:left;
	display:table; /* pour cacher en partie les pointillés disgracieux et centré la mouche, une info interessante pour les curieux ... je suis tombe dessus par hasard, comme d'habitude */
	margin: 0px 5px;



}
a {
	float:left; /* pour le dimensionner en auto */
	border:2px solid #AFD33B;
	text-align:center;/* centre texte/image */
	background-color:#FFD224;
	
}
a span {
	display:none; /* cache par defaut */

}
a:focus, a:active{
	background-color:#AFD33B;
	border:2px solid #FFD224;
	text-align:center;
	text-decoration:none;

	}
a:active span, a:focus span {
	display:inline;

}

code {color:#666;}
</style>
</head>
<body>
	<p>Pour afficher l'image , </p>
	<p>Cliquez sur son nom,</p>

	<span  class="montrecache">
		<a  href='#'alt='montre/cache l'image.' >" mouche.gif "
			<br />
				<span >
					<img src='http://gcyrillus.free.fr/dkg/mouche.gif'  />
				</span>
		</a>
	</span>

	<p>Pour la cacher, cliquez a l'exterieur.</p>
	<p>Notez l'usage des pseudo-elements<code> focus </code> et <code> active </code>.</p>
	<p>Afin de voir l'effet actif dans firefoxe et IE </p>
	<p>Ne fonctionne pas dans Opera!</p>
	<p class="signe">Voilou [smile]</p>
</body>
</html>

en demo ici si vous ne souhaitez pas copier/coller.

++
Sujet clos
Aller à