Bonjour,
Merci pour le tutoriel Afficher-Masquer-des-calques-sans-javascript, ci-desous le code utilisé et un lien vers un exemple pour une application en galerie d'image avec commentaire et ligne de vignettes pour sélection de l'image à afficher, réalisé exclusivement en CSS.
FEUILLE DE STYLE
HTML
Ma question:
Avec quels navigateurs cette galerie est-elle compatible ?
(j'ai vérifier sous IE 6 et Firefox ça fonctionne)
Merci pour vos avis et améliorations.
mise en oeuvre de l'exemple de galerie dans une page
Nicolas
Modifié par vacarme (22 Mar 2007 - 10:19)
Merci pour le tutoriel Afficher-Masquer-des-calques-sans-javascript, ci-desous le code utilisé et un lien vers un exemple pour une application en galerie d'image avec commentaire et ligne de vignettes pour sélection de l'image à afficher, réalisé exclusivement en CSS.
FEUILLE DE STYLE
<style type="text/css">
<!--
body {
background: #717171;
text-align: center; /*centrage sur IE*/
}
/* CSS issu des tutoriels css.alsacreations.com et application galerie vacarme*/
#gal{
position:relative;
width:700px;
height:500px;
margin:0px auto 0px auto;
border:1px solid #000;
cursor: default;
font-family: Arial;
font-size: 10px;
color: white;
text-align: center;
}
#gal ul{
list-style:none;
padding: 0px;
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
width: 100%;
}
#gal a {
text-decoration: none;
}
#gal a:hover {
background: none;
}
#gal a span {
display: none;
cursor: default;
}
/* position et hauteur des thumbs*/
#gal a img {
display: inline;
margin:445 5 0 5;
border: 1px solid black ;
position: relative;
z-index: 1001;
height: 35px;
}
/*image projetée et du texte commentaire*/
#gal a:hover span {
display: inline;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background: transparent;
}
/* position image initiale*//* image projetée*/
#gal img, #gal a:hover span img {
margin:10 auto 0 auto;
border: 1px solid black ;
height: 380px;
}
/* position et caractéristiques du texte commentaire*/
#gal a textarea {
background-color: transparent;
border: 0px solid white;
text-align: center;
height: 90px;
width: 480px;
overflow: hidden;
margin:405 auto 0 auto;
font-family: Arial;
font-size: 12px;
color: white;
cursor: default;
position: relative;
z-index: 1000;
}
-->
</style>
HTML
<body>
<div id="gal"><img alt="6" src="im6.jpg"><br><span>Galerie Photo - 100% CSS</span>
<ul>
<a href="#"><img alt="1" src="s1.jpg"><span><img alt="1" src="im1.jpg"></span><span><textarea readonly>commentaire de l'image 1</textarea></span></a>
<a href="#"><img alt="2" src="s2.jpg"><span><img alt="2" src="im2.jpg"></span><span><textarea readonly>commentaire de l'image 2</textarea></span></a>
<a href="#"><img alt="3" src="s3.jpg"><span><img alt="3" src="im3.jpg"></span><span><textarea readonly>commentaire de l'image 3</textarea></span></a>
<a href="#"><img alt="4" src="s4.jpg"><span><img alt="4" src="im4.jpg"></span><span><textarea readonly>commentaire de l'image 4</textarea></span></a>
<a href="#"><img alt="5" src="s5.jpg"><span><img alt="5" src="im5.jpg"></span><span><textarea readonly>commentaire de l'image 5</textarea></span></a>
<a href="#"><img alt="6" src="s6.jpg"><span><img alt="6" src="im6.jpg"></span><span><textarea readonly>commentaire de l'image 6</textarea></span></a>
<a href="#"><img alt="7" src="s7.jpg"><span><img alt="7" src="im7.jpg"></span><span><textarea readonly>commentaire de l'image 7</textarea></span></a>
<a href="#"><img alt="8" src="s8.jpg"><span><img alt="8" src="im8.jpg"></span><span><textarea readonly>commentaire de l'image 8</textarea></span></a>
<a href="#"><img alt="9" src="s9.jpg"><span><img alt="9" src="im9.jpg"></span><span><textarea readonly>commentaire de l'image 9</textarea></span></a>
<a href="#"><img alt="10" src="s10.jpg"><span><img alt="10" src="im10.jpg"></span><span><textarea readonly>commentaire de l'image 10</textarea></span></a>
<a href="#"><img alt="11" src="s11.jpg"><span><img alt="11" src="im11.jpg"></span><span><textarea readonly>commentaire de l'image 11</textarea></span></a>
<a href="#"><img alt="12" src="s12.jpg"><span><img alt="12" src="im12.jpg"></span><span><textarea readonly>commentaire de l'image 12</textarea></span></a>
</ul></div>
</body>
Ma question:
Avec quels navigateurs cette galerie est-elle compatible ?
(j'ai vérifier sous IE 6 et Firefox ça fonctionne)
Merci pour vos avis et améliorations.
mise en oeuvre de l'exemple de galerie dans une page
Nicolas
Modifié par vacarme (22 Mar 2007 - 10:19)
