CoupdePouce

Album photos V2

 

Pour ce nouvel album, créez tout d'abord deux types d'images; une en taille réelle
l'autre en miniature. Pour la taille réelle, il vous faut 10 images de 333 x 250px et
pour les miniatures (les mêmes images) de 80 x 60px.

Copiez ce code dans votre feuille de style:

a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:50px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(http://...miniature);}
a.slideb {background:url(http://...miniature);}
a.slidec {background:url((http://...miniature);}
a.slided {background:url((http://...miniature);}
a.slidee {background:url((http://...miniature);}
a.slidef {background:url((http://...miniature);}
a.slideg {background:url((http://...miniature);}
a.slideh {background:url((http://...miniature);}
a.slidei {background:url((http://...miniature);}
a.slidej {background:url((http://...miniature);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}
#container_right {position:relative; width:615px; height:312px; background:#191970; border:2px solid #0000ff; margin:1em auto;}
#container_right img {border:0;}
#container_right .thumbs {width:175px; position:absolute; right:0; top:0;}
#container_right a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:-430px; padding:5px; font-style:normal; color:#fff;  z-index:100;}
#container_right a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#ffd700;}
#container_right a.gallery:active, #container_right a.gallery:focus {border:1px solid #000;}
#container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:333px; height:250px; top:5px; left:-425px; padding:5px; color:#ffd700; border:1px solid #ffd700; z-index:50;}
#container_right h1 {clear:both; margin:0; padding-top:95px; padding-left:50px; width:305px; text-align:center; font-family: georgia, "times new roman", serif; font-size:1.5em; font-weight:normal; color:#fff;}
#container_right h1 em {font-size:0.6em; color:#ffd700;}

Et dans votre article: 

<div id="container_right">
<div class="thumbs">
<a href="#nogo" class="gallery slidea"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slideb"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slidec"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slided"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slidee"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slidef"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slideg"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slideh"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slidei"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>

<a href="#nogo" class="gallery slidej"><em>
<img src="http://...taille réelle" border="0" /></em>
<span>Légende<br />Photoshopping</span></a>
</div>
<h1>Les images<br /><em>de</em>
<br />mes souvenirs<br /></h1>

Pour modifier les couleurs, procédez comme suit:

#container_right:  background:#191970;>fond de l'album,
border:2px solid #0000ff;>couleur de la bordure extérieure.

#container_right a.gallery:focus em:  border:1px solid #ffd700>bordure du cadre intérieur.

#container_right h1:  color:#fff;> couleur du texte central.

#container_right h1 em:  color:#ffd700;>couleur de la légende.

#container_right a.gallery:hover span:  color:#fff;>couleur du texte sous la légende.

a.gallery:hover:  border:1px solid #fff;>couleur de bordure des miniatures
lors de la sélection.

Je vous souhaite un très bon travail. 

aucun commentaire - aucun rétrolien

Page précédente | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Page suivante