fonds d'écran - créations numériques - webmastering - photograhie - création de site - référencement efficace


 

 

Réaliser une petite galerie photos, uniquement à l'aide de la CSS permet un affichage fluide et une meilleure compatibilité avec les différents navigateurs. Il existe de nombreux scripts déjà en ligne,(notamment sur Alsacréations),celui-ci est une autre version optimisée un peu plus avec l'insertion des balises ' alt ' et ' title '. Testez, essayez et vous verrez la simplicté de ce codage. Il ne vous faudra que le temps de préparer correctement les images et de rentrer quelques ligne de code ... L'effet et garanti et vous pouvez bien sur changer les paramètres des couleurs et des tailles d'affichage des vignettes ainsi que leur nombre . Le code source se trouve en bas de page ...

Le code source :

CSS à mettre dans la partie 'head' de la page:

<style type="text/css">
a.zip {text-decoration: none;}
a.zip:hover {background: none; }
a.zip span {display: none;}
a.zip:hover span {display: block;
background:#333;
padding:10px 50px 10px 50px;
position:absolute;
top:186px; left:160px;
text-align: center;
color:#ccc;
}
a.opacity img {filter:alpha(opacity=30);
-moz-opacity: 0.3; opacity: 0.3;}
a.opacity:hover img
{filter:alpha(opacity=100);-moz-opacity:1.0; opacity: 1.0;}
#galerie {border:1px solid #333;width:560px;background:#000}
/*#galerie {border:1px solid #333;width:560px;background:#fff}*/
a {background:none; text-decoration:none;border:0px none;color:#fff;}
.vignette {width:35px; height:50px;}
.grande {width:300px; height:400px;}
</style>

Exemple d'une partie du code de l'affichage dans la partie 'body' (à 'multiplier selon le nombre d'images):

<div id="galerie">
<table border="0" cellpadding="0" cellspacing="2">
<tbody style="text-align: center;">
<tr>
<td>
<a class="zip opacity"><img class="vignette" src="images/aiko.jpg" alt="aiko" title="aiko"><span><img src="images/aiko.jpg" alt="aiko" title="aiko" class="grande"><br><br>aiko avec DAZ Studio</span></a>
</td>
<td>
<a class="zip opacity"><img src="images/amazone.jpg" alt="amazone" title="amazone" class="vignette"> <span><img src="images/amazone.jpg" alt="amazone" title="amazone" class="grande"><br><br>Amazone avec DAZ Studio</span></a>
</td>
<td>
<a class="zip opacity"><img class="vignette" src="images/arlequin.jpg" alt="arlequin" title="arlequin"> <span><img src="images/arlequin.jpg" alt="arlequin" title="arlequin" class="grande"><br><br>arlequin travail avec photoshop</span></a>
</td>
</tr>
</tbody>
</table>
</div>

Pour créer facilement une petite galerie de photos en ligne, quelques lignes en JavaScript, quelques ligne en CSS et hop ! il ne reste plus qu'à passer la souris au-dessus des vignettes pour les visualiser en plus grand. Petit codage bien pratique, non ? Tout le monde peut réussir à le réaliser très simplement, en voici les sources principales que vous pourrez personnaliser à votre guise ... Il est présenté ici dans sa version la plus simple et légère, sans aucune balise 'alt' ou 'title' qu'il est bien sur possible d'ajouter ... Vous pouvez trouver le code source ci-dessous . Tests sur les galeries photos et différents scripts | Les indiens d'Amérique,1184 images d'archives | Salvador Dali avec JAlBum | Galerie photos avec Singapore | Galerie avec simpleviewer | Galerie avec JAlbum et tiltviewer | Galerie simple JavaScript et CSS | Galerie photos simple avec la CSS | Galerie photos Zengarden | Galerie photos Piwigo | Effet Zoom Photoshop | Galerie photos avec Photoshop | TinyWebGallery | (si la page sur laquelle vous arrivez ne contient pas le menu, utilisez le 'retour arrière' du navigateur ...)