astuces

Astuces pour présenter vos images - Accueil

Après avoir créé et éventuellement transformé vos images (galeries, PDF, flipbook…), voici quelques idées simples pour les présenter sur une page web
sans outils complexes, avec des moyens très simples, en écrivant directement le code HTML.
Cette approche “à la main” évite l’utilisation d’outils complexes ou payants, et reste accessible avec un éditeur comme FrontPage Express.
En contrepartie, on peut avoir besoin de petits exemples de code (scripts ou modèles HTML).
Les images doivent être accessibles par la page HTML.
Le plus simple est de les placer dans le même dossier, ce qui évite d’avoir à gérer des chemins plus complexes (dossiers, sous-dossiers…).

Lors de la création d’une nouvelle page, les images peuvent ne pas s’afficher en mode édition.
Il faut d’abord enregistrer la page dans le bon dossier pour que les chemins vers les images soient correctement pris en compte.

Pour apprendre et copier du code fiable
W3Schools > https://www.w3schools.com/

exemples simples

HTML / CSS basique

copier-coller compréhensible

ChatGPT > https://chatgpt.com
pour :
- adapter les scripts à votre cas
- expliquer
- corriger quand ça bloque
j'ai créé cette page ainsi que Exploiter les images créées avec l'IA avec l'aide de ChatGPT

1. Diaporama “brut de coffrage”
Un diaporama automatique très simple à mettre en place avec quelques lignes de JavaScript.
Niveau : débutant
le script JavaScript
Avantages :
ultra simple
fonctionne partout
aucune installation

on peut ajouter :
vitesse réglable
images de même taille recommandées

Exemple en fonctionnement :
(diaporama ci-dessous)

Principe :
Les images changent automatiquement toutes les 3 secondes.

Mode d'emploi :
avec FrontPage Express, passez en mode Affichage / HTML,
puis copiez-collez ce script dans votre page
(de préférence dans la partie <head> pour le script,
et dans <body> pour l’image)

<html>
<head>
<script>
var images = [
"votre_image1.jpg",
"votre_image2.jpg",
"votre_image3.jpg"
];

var index = 0;

function changerImage() {
index++;
if (index >= images.length) {
index = 0;
}
document.getElementById("diapo").src = images[index];
}

setInterval(changerImage, 3000); // 3 secondes
</script>
</head>

<body>
<img id="diapo" src="votre_image1.jpg " width="largeur" height="hauteur" id="diapo">
</body>
</html>

2. Diaporama “brut de coffrage” avec légende
Évolution du diaporama

Ce diaporama est une évolution du modèle initial “brut de coffrage”,
qui se limitait à afficher des images en boucle automatique, sans indication ni contexte.

Dans cette version, une amélioration essentielle a été ajoutée : la légende dynamique.
Chaque image est désormais accompagnée d’un texte explicatif qui se met à jour automatiquement,
permettant de donner du sens au contenu affiché.

Qu’a-t-on ajouté par rapport au diaporama brut ?
* Une légende associée à chaque image
* Une lecture plus claire et contextualisée du contenu
* Une structuration image + texte

Le rôle des boutons

Des boutons de navigation ont également été ajoutés. Ils permettent :
d’avancer immédiatement à l’image suivante, de revenir en arrière
d’accélérer la consultation sans attendre le défilement automatique

Ils complètent ainsi le mode automatique en offrant une interaction directe,
même si le diaporama continue de fonctionner de manière autonome.

Ce que cela change

On passe d’un simple enchaînement visuel à un diaporama plus structuré et semi-interactif :

automatique pour la visualisation continue
manuel pour un contrôle rapide et ponctuel

Résumé

Une évolution simple mais importante :
ajout de sens (légendes) et de contrôle (boutons) au diaporama brut, tout en conservant sa simplicité et sa fluidité.

voir le diaporama avec légende
images créées avec ChatGPT/Sora, à partir de photos prises par Jacky Tessier, https://www.facebook.com/jacky.tessier.5855/

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Diaporama</title>
</head>

<body style="text-align:center; font-family:Arial;">

<p>
<img src="princesse.jpg" width="620" height="454" id="img"
style="border-radius:10px">
</p>

<p id="txt">Princesse (style IA)</p>

<p>
<button onclick="p()" style="width:60px;"><<</button>
<button onclick="n()" style="width:60px;">>></button>
</p>

<script>

var d=[
["princesse.jpg","Princesse (style IA)"],
["maisons.jpg","Maisons générées"],
["sourire.jpg","Portrait avec sourire"]
];

var i=0;

function s(){
document.getElementById("img").src=d[i][0];
document.getElementById("txt").innerText=d[i][1];
}

function n(){
i++;
if(i>=d.length)i=0;
s();
}

function p(){
i--;
if(i<0)i=d.length-1;
s();
}

// auto simple (FIABLE)
setInterval(n,3000);

</script>

Princesse (style IA)

3. Diaporama interactif avec navigation

Le premier diaporama présenté ci-dessus est un modèle “brut de coffrage” : une seule image est affichée, sans interaction.
Il fonctionne, mais reste limité puisqu’il ne permet pas de naviguer entre plusieurs images.

Le deuxième diaporama apporte déjà une première amélioration en introduisant une navigation simple entre les images.

Nous allons maintenant l’améliorer en ajoutant une navigation plus structurée avec des flèches “Précédent” et “Suivant”. Cette évolution permet de transformer une simple image affichée en un véritable diaporama interactif.

il suffit de changer le nom des images, et si on en ajoute, entourer le nom de " "

Améliorations simples et efficaces
1. Fond d’écran
noir (classique galerie)
ou gris foncé (plus doux)

2. Image mieux centrée
déjà le cas si tu as align=center ou style centré
sinon tu peux juste centrer dans l’éditeur

3. Boutons plus visibles
remplacer “Suivant / Précédent” par :
des images ou même images flèches

4. Effet simple (optionnel)
transition douce entre images (en secondes, 3 ou 4")

Des variantes plus avancées existent (compteur d’images, effets…), mais elles ne sont pas détaillées ici pour rester simple.

voir le diaporama interactif avec légende et compteur
images créées avec ChatGPT/Sora, à partir de photos prises par Jacky Tessier, https://www.facebook.com/jacky.tessier.5855/

<p align="center">
<img id="diapo" src="princesse.jpg" width="600" height="454"><br><br>

<button onclick="precedent()">? Précédent</button>
<button onclick="suivant()">Suivant ?</button>
</p>

<script>
var images = ["princesse.jpg", "maisons.jpg", "sourire.jpg"];
var index = 0;

function afficher() {
document.getElementById("diapo").src = images[index];
}

function changer() {
setTimeout(afficher, 400); // ˜ effet 4/10 seconde
}

function suivant() {
index = (index + 1) % images.length;
changer();
}

function precedent() {
index = (index - 1 + images.length) % images.length;
changer();
}

afficher();
</script>

4. Pour image cliquable simple en HTML, sans script

Les images affichées sont des vignettes optimisées pour le web.
Un clic ouvre l’image en pleine résolution.

usage simple
usage en série (galerie)

exemple à partir de mes images
images originales :
princesse.jpg (620×460)
maisons.jpg (620×460)
sourire.jpg (620×460)

vignettes :
princesse_t.jpg (150×110)
maisons_t.jpg (150×110)
sourire_t.jpg (150×110)

<html>
<head>
<title>Galerie</title>
</head>

<body>

<a href="princesse.jpg" target="_blank">
<img src="princesse_t.jpg" width="150" height="110" style="margin:5px;">
</a>

<a href="maisons.jpg" target="_blank">
<img src="maisons_t.jpg" width="150" height="110" style="margin:5px;">
</a>

<a href="sourire.jpg" target="_blank">
<img src="sourire_t.jpg" width="150" height="110" style="margin:5px;">
</a>

</body>
</html>

Les seules “vraies” astuces en plus (qui valent le coup)
- du confort visuel
- de la présentation

1. Image avec légende (cas simple)
```
<div style="text-align:center;">
  <img src="princesse_t.jpg" width="150" height="110"><br>
  Princesse
</div>
```
> apporte du contexte
> très utile pour une galerie

limite de la méthode

Si on répète ce code pour plusieurs images, elles s’empilent verticalement et ne forment pas une galerie.

Solution pour plusieurs images (table) >>

<body>
<table align="center">
<tr>
<td align="center">
<img src="princesse_t.jpg" width="150" height="110"><br>
Princesse
</td>

<td align="center">
<img src="maisons_t.jpg" width="150" height="110"><br>
Maisons
</td>

<td align="center">
<img src="sourire_t.jpg" width="150" height="110"><br>
Sourire
</td>
</tr>
</table>
</body>

Princesse

Maisons

Sourire

2. Image avec info au survol (tooltip)
```
<img src="princesse_t.jpg" width="150" height="110" title="Princesse IA">
```
> simple
> aucun script
> petit plus agréable

passer la souris sur l'image

Princesse IA

3. Séparer visuellement les groupes d’images
```
<hr>
```
> permet de structurer plusieurs galeries
> très utile si on a plusieurs thèmes

exemple :
<body>

<p><a href="princesse.jpg" target="_blank">
<img src="princesse_t.jpg" width="150" height="110"
style="margin:5px;"> </a></p>
<hr>

<p><a href="maisons.jpg" target="_blank">
<img src="maisons_t.jpg"
width="150" height="110" style="margin:5px;"> </a></p>
<hr>

<p><a href="sourire.jpg" target="_blank">
<img src="sourire_t.jpg"
width="150" height="110" style="margin:5px;"> </a></p>
<hr>

4.Structure finale plus propre

Cette galerie combine plusieurs astuces :
affichage en vignettes
vignettes alignées proprement
clic > image en grand > ouverture en grand au clic
légendes sous chaque image,
et affichage d’un titre au survol (tooltip).

en rose: le titre
en bleu le tooltip

<table align="center">
<tr>

<td align="center">
<a href="princesse.jpg" target="_blank">
<img src="princesse_t.jpg" width="150" height="110"
title="Princesse">
</a><br>
Princesse
</td>

<td align="center">
<a href="maisons.jpg" target="_blank">
<img src="maisons_t.jpg" width="150" height="110"
title="Maisons">
</a><br>
Maisons
</td>

<td align="center">
<a href="sourire.jpg" target="_blank">
<img src="sourire_t.jpg" width="150" height="110"
title="Sourire">
</a><br>
Sourire
</td>

</tr>
</table>