Cette fonction permet de créer un tableau de n lignes et de deux colonnes. Chaque ligne comporte une photo et le commentaire afférent. Ce code est optimisé et permet de ne pas répéter constamment les balises HTML <tr> et <td>, le chemin relatif vers les fichiers images et les balises de paragraphes. Dans cet exemple, les photos auront une taille de 400x300 pixels. Les photos peuvent être au format portrait ou paysage et sont centrées dans la première colonne du tableau. De plus, le recours à une feuille de style est préférable pour changer les attributs du paragraphe affichant les commentaires.
<html>
<head>
<title>Affichage de photos et de commentaires</title>
<link rel="stylesheet" type="text/css" href="../css/texte.css">
<script language="javascript">
var debut_ligne="<tr><td align='center'><p class='image'><img src=\"Repertoire_contenant_les_photos/";
var milieu_ligne=".jpg\"/></p></td><td valign='middle'><p class='commentaire'>";
var fin_ligne="</p></td></tr>";
function affichePhoto(fichier,texte){
document.write(debut_ligne+fichier+milieu_ligne+texte+fin_ligne);
}
</script>
</head>
<body>
<table>
<script>
affichePhoto('fichier_photo_1','le commentaire de la première photo')
affichePhoto('fichier_photo_2','le commentaire de la deuxième photo')
...(à répéter autant de fois qu'il y a de photos dans le répertoire)
</script>
</table>
</body>
</html>
L'utilisation d'une feuille de style nécessite d'inclure le code suivant dans le fichier "texte.css".
p.image {
margin-top : 3px;
margin-bottom : 3px;
text-align : center;
}
p.commentaire {
font : Georgia;
color : blue;
margin-top : 6px;
margin-bottom : 12px;
text-align : center;
}
Un exemple d'affichage est accessible sur le site du film Quand la mer monte.