Hello à toutes et à toutes
L'objectif visé est de rajouter une légende à une vignette.
Cette vignette est cliquable et appelle une image de plus grande taille.
Ouaci la CSS :
Et son HTML :
Il y a plusieurs problèmes avec mon code :
1/ l'image si elle est bien visible dans FF3 devient incliquable
2/ si l'image est bien cliquable dans IE et Opera, la boîte qui contient la légende se balade. Mais ça c'est un moindre problème.
Pour le point je me gratte la tête depuis une heure sans trouver la raison de ce problème.
ÉDITION : Résolu. J'avais oublié de donner une hauteur à mon paragraphe.
Modifié par Sventovit (07 Aug 2008 - 18:50)
L'objectif visé est de rajouter une légende à une vignette.
Cette vignette est cliquable et appelle une image de plus grande taille.
Ouaci la CSS :
/* BOITE A IMAGES */
.window_overlay{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}
.window_content {position: absolute;display: none;border: 16px solid #FFCC00;background-color:#000;z-index:1002;height: auto;width: auto;overflow:auto}
.window_content a{display: block;font-size:1.6em;font-weight: bold;color:#000;background: #FFCC00 url(button-close.png) no-repeat left 84%;padding-left: 30px;padding-top:10px;text-decoration: none}
.window_content a:hover{background: #FFCC00 url(button-close-hover.png) no-repeat left 84%;color:#999}
img.polaroid {padding: 1% 1% 8%;background: #fff;border: 1px solid #ccc;border-width: 1px 2px 2px 1px}
#vign {float: left;}
#vign p {text-align: center;color: #333;display: block;position: relative;top: -30px;font-size: .8em;}Et son HTML :
<div id="vign">
<a href = "javascript:void(0)" onclick = "document.getElementById('large').style.display='block';document.getElementById('small').style.display='block'"><img src="vign.jpg" alt="blabla" width="160" height="120" class="img_left polaroid" /></a>
<p>Bla bla bla...</p></div>
<div id="large" class="window_content"><img src="large.jpg" width="800" height="600" alt="bla" /><a href = "javascript:void(0)" onclick = "document.getElementById('large').style.display='none';document.getElementById('small').style.display='none'">Fermer la fenêtre</a></div>
<div id="small" class="window_overlay"></div>
Il y a plusieurs problèmes avec mon code :
1/ l'image si elle est bien visible dans FF3 devient incliquable
2/ si l'image est bien cliquable dans IE et Opera, la boîte qui contient la légende se balade. Mais ça c'est un moindre problème.
Pour le point je me gratte la tête depuis une heure sans trouver la raison de ce problème.
ÉDITION : Résolu. J'avais oublié de donner une hauteur à mon paragraphe.
Modifié par Sventovit (07 Aug 2008 - 18:50)