Mardi 6 Novembre 2007
Album photos V2
Par Jacky, Mardi 6 Novembre 2007 à 10:10 GMT+2 dans Astuces CSS
L'ange gardienPhotoshopping
Une colombe dans la nuitPhotoshopping
La légende des elphesPhotoshopping
La femme du volcanPhotoshopping
Une jeune fille dans la solitudePhotoshopping
La vie des ApachesPhotoshopping
Un chat sur la lunePhotoshopping
Les signes du zodiaque- le scorpionPhotoshopping
La légende des sirènesPhotoshopping
Une nuit un rêvePhotoshopping
Les images
de
mes souvenirs
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.




