1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Une feuille de style xsl est un document xml -->
<!-- Début de la feuille de style -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- Variables globales, le mieux est de les lire depuis le XML -->
<xsl:variable name="larg_page">900</xsl:variable>
<!-- Début du traitement, par le noeud racine -->
<xsl:template match="/">
<!-- Affichage html -->
<html>
<!-- La partie en-tête -->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<link href="exemple.css" rel="stylesheet" type="text/css" />
</head>
<!-- Le corps de la page -->
<body class="defaut">
<!-- Pour chaque noeud "paragraphe" -->
<xsl:for-each select="site/page/paragraphe">
<!-- Calcul de la somme des ratios des images contenues dans chaque paragraphe -->
<xsl:variable name="tot_ratio">
<xsl:call-template name="somme_ratios">
<xsl:with-param name="total">0</xsl:with-param>
<xsl:with-param name="position">1</xsl:with-param>
</xsl:call-template>
</xsl:variable>
<!-- Affichage du paragraphe -->
<p class="photo">
<!-- Pour chaque image contenue dans le paragraphe -->
<xsl:for-each select="image">
<!-- Calculs de la largeur et de la hauteur modifiée -->
<xsl:variable name="l_new">
<xsl:value-of select="number(@l_orig * $larg_page div @h_orig div $tot_ratio)" />
</xsl:variable>
<xsl:variable name="h_new">
<xsl:value-of select="number($l_new * @h_orig div @l_orig)" />
</xsl:variable>
<!-- La balise image, sur laquelle on ajoute des attributs paramétrables -->
<img alt="Image introuvable...">
<xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute>
<xsl:attribute name="width"><xsl:value-of select="$l_new" /></xsl:attribute>
<xsl:attribute name="height"><xsl:value-of select="$h_new" /></xsl:attribute>
</img>
<!-- Un espace pour décoller les images les unes des autres -->
<xsl:text> </xsl:text>
</xsl:for-each>
<!-- Fin du traitement de chaque image -->
</p>
<!-- Fin du paragraphe -->
</xsl:for-each>
<!-- Fin du noeud "paragraphe" -->
</body>
</html>
<!-- Fin de la page html -->
</xsl:template>
<!-- Fin du xml, noeud racine "/" -->
<!-- Fonction qui calcule la somme des rapports largeur/hauteur,
pour tous les noeuds "image" contenu dans le noeud courant -->
<xsl:template name="somme_ratios">
<!-- Paramètres d'entrée, l'appel externe se fait avec total=0 et position = 1 -->
<xsl:param name="total"/>
<xsl:param name="position"/>
<!--Dans quel cas somme-nous ? -->
<xsl:choose>
<!-- 1: oui, il existe une image -->
<xsl:when test="$position <= count(image)">
<!-- définition des deux variables largeur et hauteur (lecture d'attributs) -->
<xsl:variable name="largeur_i">
<xsl:value-of select="image[position()=$position]/@l_orig"/>
</xsl:variable>
<xsl:variable name="hauteur_i">
<xsl:value-of select="image[position()=$position]/@h_orig"/>
</xsl:variable>
<!-- calcul du ratio l/h de cette image -->
<xsl:variable name="ratio_i">
<xsl:value-of select="number($largeur_i div $hauteur_i)"/>
</xsl:variable>
<!-- puis on passe à l'image suivante, en mettant à jour les paramètres -->
<xsl:call-template name="somme_ratios">
<xsl:with-param name="total">
<xsl:value-of select="$total+$ratio_i"/>
</xsl:with-param>
<xsl:with-param name="position">
<xsl:value-of select="$position+1"/>
</xsl:with-param>
</xsl:call-template>
</xsl:when>
<!-- 2 : Sinon, cas final, plus d'image, on "affiche" le résultat -->
<xsl:otherwise>
<xsl:value-of select="$total"/>
</xsl:otherwise>
</xsl:choose>
<!-- Fin des cas -->
</xsl:template>
<!-- Fin de la fonction -->
</xsl:stylesheet>
<!-- Fin de la feuille de style xsl --> |
[RESOLU] [XML/DTD/XSL/CSS/HTM] Affichage d'images (tutorial)
Répondre avec citation
Partager