Bonjour,
en préambule, je suis totalement novice...
J'ai trouvé une galerie photo correspondant à mes attentes, j'ai déjà inversé sa position (right pour left) et sa présentation.
je souhaiterais qq chose qui ressemblerait à cela : http://www.kabo-c.com/galeriegauche/galeriegauche.html mais où le scrolling serait remplacé par un clic sur les thumbnails.
Malheureusement, je ne vois pas comment faire.
enfin si qu'un peut m'aider ce serait adorable et d'avance merci. smile
PS : j'espère que les lignes qui suivront seront correctement mises en forme...
en préambule, je suis totalement novice...
J'ai trouvé une galerie photo correspondant à mes attentes, j'ai déjà inversé sa position (right pour left) et sa présentation.
je souhaiterais qq chose qui ressemblerait à cela : http://www.kabo-c.com/galeriegauche/galeriegauche.html mais où le scrolling serait remplacé par un clic sur les thumbnails.
Malheureusement, je ne vois pas comment faire.
enfin si qu'un peut m'aider ce serait adorable et d'avance merci. smile
PS : j'espère que les lignes qui suivront seront correctement mises en forme...
body {
text-align:center;
font: 11px Verdana, Arial, Helvetica, sans-serif, arial, sans-serif;
letter-spacing:0.05em;
}
/*container
#container {
position: relative;
width: 650px;
height: 407px;
margin: 20px auto 0;
border: 1px solid #aaa;
background: #fff url(../images/back.jpg) no-repeat 75px 10px;
}
/* size - and position
#container ul {
float:left;
width:280px;
height:386px;
padding:0;
margin:5px;
list-style:none;
}
#container li {float:left;}
/* Remove the images and text from sight
#container a.gallery span {
position:absolute;
overflow:hidden;
width:1px;
height:1px;
top:5px;
left:5px;
background:#fff;
}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display:block;
color:#666666;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.slidea, #container a.slideb, #container a.slidec, #container a.slided, #container a.slidee, #container a.slidef, #container a.slideg, #container a.slideh, #container a.slidei {
background: url(p1.jpg);
height:80px;
width:80px;
}
/* styling the hovers */
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover span {
position:absolute;
width:300px;
height:400px;
top:0px;
left:340px;
color:#666666;
background:#fff;
border: 1px solid #00FF00
}
#container a.gallery:hover img {
float:left;
margin-right:5px;
border:1px solid #fff;
}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
