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 ...)

Pour les amateurs, il faut créer un dossier nommé 'images', dans lequel vous placez, images et vignettes, et dans la page "index" par exemple, voici:

- La CSS à mettre avant le </head>:

<style>
.vignette
{
cursor : pointer;
border-style : solid;
border-width : 5px;
border-color : #EEE7DD;
width : 150px;
height : 113px;
}
.standard
{
cursor : pointer;
border-style : solid;
border-width : 5px;
border-color : #EEE7DD;
width : 470px;
height : 360px;
}
</style>

- Le code JavaScript à placer dans la même partie:

<script language="Javascript">
<!--
// Création d'une nouvelle classe d'objet servant à stocker une liste d'images
function ListeImage()
{
this.images = new Array();
}
// Ajouter le nom d'une fichier correspond à une image dans la liste
function listeImage_ajouter(fichier)
{
var obj = new Object();

// Précharge l'image
obj.img = new Image();
obj.img.src = fichier;

this.images[this.images.length]= obj;
}
ListeImage.prototype.ajouter = listeImage_ajouter;
// Sélectionne une image dans la liste par son index et l'affiche dans le cadre principal
function listeImage_selectionner(index)
{
var elt = document.getElementById(this.image_id+"0");
elt.src = this.images[index].img.src;
}
ListeImage.prototype.selectionner = listeImage_selectionner;
//Initialise la liste d'image avec le préfixe servant à identifier les images dans la page HTML
// et les gestionnaires d'événement
// ex "img_" : img_0 = image principale
// img_1 = image vignette nr 1
// img_2 = image vignette nr 2
function listeImage_initialiser(image_id)
{
this.image_id = image_id;
for (var i=0; i < this.images.length; i++)
{
var elt = document.getElementById(this.image_id+(i+1));
if (elt)
{
elt.onmouseover = image_over;
elt.index = i;
}
}
}
ListeImage.prototype.initialiser = listeImage_initialiser;
// Gestionnaire d'événement appelé lorsque la souris se trouve sur une image vignette
function image_over()
{
listeImages.selectionner(this.index);
}
// Créé une nouvelle liste d'images
var listeImages = new ListeImage();

// Charge la liste des images
listeImages.ajouter('images/photo1.jpg');
listeImages.ajouter('images/photo2.jpg');
listeImages.ajouter('images/photo3.jpg');
listeImages.ajouter('images/photo4.jpg');
listeImages.ajouter('images/photo5.jpg');
listeImages.ajouter('images/photo6.jpg');
function load()
{
listeImages.initialiser("img_");
}
// -->
</script>

- et un exemple du codage situé dans la partie body, que vous pourrez ensuite peronnaliser à votre guise:

<table border="0">
<tr>
<td><img src="images/vignette1.jpg" width="150" height="90" class="vignette" id="img_1"></td>
<td><img src="images/vignette2.jpg" width="150" height="90" class="vignette" id="img_2"></td>
<td><img src="images/vignette3.jpg" width="150" height="90" class="vignette" id="img_3"></td>
</tr>
<tr>
<td><img src="images/vignette4.jpg" width="150" height="90" class="vignette" id="img_4"></td>
<td><img src="images/vignette5.jpg" width="150" height="80" class="vignette" id="img_5"></td>
<td><img src="images/vignette6.jpg" width="150" height="90" class="vignette" id="img_6"></td>
</tr>
<table border="0">
<tr>
<td colspan="4" align="center"><img src="images/photo1.jpg" width="480" height="360" class="standard" id="img_0"></td>
</tr>
<tr>
</table>