Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2763 connectés 

  FORUM HardWare.fr
  Programmation
  XML/XSL

  [XML/DTD/XSL/CSS/HTM] Exemple affichage d'images (tutorial)

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[XML/DTD/XSL/CSS/HTM] Exemple affichage d'images (tutorial)

n°1124082
La_Buze
Posté le 18-06-2005 à 18:22:42  profilanswer
 

[XML/DTD/XSL/CSS/HTM] Exemple affichage d'images (tutorial)
 
 
Bonjour !
 
j'avance pas à pas en xml/xsl -> html, dans le but de créer des galeries de photos paramétrées...
 
 
[EDIT : je pense que c'est un bon exemple pour avancer en xsl après vous être ingurgité les tutoriels XML/DTD/XSL disponibles sur le net.
Voir solution tutorisée (tutorialisée?) dans le message suivant]
 
Définition du problème :
 
pour chaque paragraphe, j'insère un nombre variable d'images :

Code :
  1. <!ELEMENT paragraphe (posparag,info,image+,commentaire*)>
  2. <!ATTLIST paragraphe pos_page ID #REQUIRED>
  3. <!ELEMENT info (#PCDATA)>
  4. <!ELEMENT image (#PCDATA)>
  5. <!ATTLIST image l_orig NMTOKEN #REQUIRED h_orig NMTOKEN #REQUIRED>
  6. <!ELEMENT commentaire (auteur,texte,jour,mois,année)>


si je veux retailler les images pour qu'elles s'affichent sur une ligne,
j'ai une solution ($larg_page est la largeur imposée de la page) :

Code :
  1. <xsl:variable name="larg_imgs">
  2.   <xsl:value-of select="sum(image/@l_orig)" />
  3. </xsl:variable>
  5. <xsl:for-each select="image">
  6. <img alt="marche pas">
  7.    <xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute>
  8.    <xsl:attribute name="width"><xsl:value-of select="number(@l_orig * $larg_page div $larg_imgs)" /></xsl:attribute>
  9.    <xsl:attribute name="height"><xsl:value-of select="number(@h_orig * $larg_page div $larg_imgs)" /></xsl:attribute>
  10.   </img>
  11.   <xsl:text> </xsl:text>
  12. </xsl:for-each>


 
Maintenant, si je veux améliorer cet affichage, et faire en sorte que les images aient la même hauteur, et soient toujours affichées sur une largeur imposée, ça se complique, j'ai maintenant besoin de la somme des rapports hauteur/largeur des images.
et bien sûr, le code suivant serait trop simple :

Code :
  1. <!-- A MARCHE PAS -->
  2.   <xsl:variable name="larg_imgs">
  3.    <xsl:value-of select="sum(image/@l_orig div image/@h_orig)" />
  4.   </xsl:variable>


j'ai essayé pas mal d'autres formulations, jusqu'à recréer une variable node avec en éléments les rapports l/h, mais je ne crois pas avoir le droit d'en calculer la somme :

Code :
  1. <!-- A MARCHE PAS -->
  2.   <xsl:variable name="test" >
  3.    <racine>
  4.    <xsl:for-each select="image">
  5.     <element>
  6.     <xsl:value-of select="number(@l_orig div @h_orig)" />
  7.     </element>
  8.    </xsl:for-each>
  9.    </racine>
  10.   </xsl:variable>
  11.   <p>
  12.   <xsl:value-of select="sum($test)" />
  13.   </p>


 
Voilà !
 
PS :
pour ceux que ça intéresse, à partir de n images, pour les afficher sur sur largeur X, et qu'elles aient la même hauteur sans modifier leur ratio h/l
x'i = (xi / yi ) * (X / (somme[1..n](xi/yi)))
y'i = yi * x'i / xi


Message édité par La_Buze le 19-06-2005 à 11:10:42
mood
Publicité
Posté le 18-06-2005 à 18:22:42  profilanswer
 

n°1124337
La_Buze
Posté le 19-06-2005 à 01:39:37  profilanswer
 

Une bonne galère c'te problème...
 
j'ai fini par trouver une solution (unique?) grâce à l'ébauche de la faq
http://www.developpez.net/forums/viewtopic.php?t=90007
Donc merci à grégory !
 
pour les débutants qui tomberaient ici, je vais essayer d'expliquer la solution en détail,
pour les pros, vos commentaires, conseils et corrections seront gratifiés et gratifiants.
(le code n'est pas optimisé, il est le plus clair possible,
ça fait deux jours que je débute avec ce langage,
et je suis maçon d'origine ;-)
 
J'en ai fait des tartines bien beurrées, c'est peut-être un peu lourd,
s'il reste des points peu clairs, n'hésitez pas à proposer des corrections.
 
On y va ?
 
Rappel de la DTD (simplifiée) :

Code :
  1. <!ELEMENT site (parametres,page+)>
  2. <!ELEMENT page (paragraphe+)>
  3. <!ELEMENT paragraphe (image+)>
  4. <!ELEMENT image (#PCDATA)>
  5. <!ATTLIST image l_orig NMTOKEN #REQUIRED h_orig NMTOKEN #REQUIRED>


 
Exemple de fichier xml :

Code :
  1. <!DOCTYPE librairie SYSTEM "generique.dtd">
  2. <site>
  3.    <page>
  4.       <paragraphe pos_page="ab2">
  5.          <image l_orig="600" h_orig="398">exemple3.jpg</image>
  6.          <image l_orig="600" h_orig="511">exemple4.jpg</image>
  7.          <image l_orig="600" h_orig="426">exemple5.jpg</image>
  8.       </paragraphe>
  9.       <paragraphe pos_page="ab1">
  10.          <image l_orig="600" h_orig="404">exemple1.jpg</image>
  11.          <image l_orig="600" h_orig="404">exemple1.jpg</image>
  12.          <image l_orig="600" h_orig="404">exemple1.jpg</image>
  13.       </paragraphe>
  14.       <paragraphe pos_page="ab3">
  15.          <info>Info du paragraphe3</info>
  16.          <image l_orig="600" h_orig="180">exemple2.jpg</image>
  17.          <image l_orig="600" h_orig="180">exemple2.jpg</image>
  18.       </paragraphe>
  19.    </page>
  20. </site>


 
Contraintes :

Code :
  1. Chaque <p>paragraphe</p> doit contenir toutes les images sur une seule ligne
  2. en fonction de la largeur du paragraphe qui est imposée ($larg_page)
  3. La hauteur des images sera identique (pour chaque ligne)
  4. Le ratio hauteur/largeur des images ne doit pas être modifié


 
Après un bon moment passé sur papier, j'abouti au résultat suivant :

Code :
  1. l_new = (l_orig * larg_page) / (h_orig * tot_ratio)
  2. h_new = (l_new * (h_orig / l_orig)
  3. avec tot_ratio = somme de tous les rapports largeur / hauteur des images


 
La difficulté vient principalement de ce calcul tot_ratio,
qui ne peut être réalisé simplement avec un :

Code :
  1. "sum(@l_orig div @h_orig)"


 
D'après grégory, la seule solution est la méthode itérative
(puisqu'une xls:variable est en fait une constante :-/)
 
Plongeons et creusons pas à pas notre trou (ou plutôt résultat) :
Le principe consiste à calculer le ratio de la première image,
puis de le "transmettre" à l'image suivante, qui l'additionnera
à son propre ratio avant de l'envoyer à l'image d'après etc...
jusqu'à ce qu'il n'y ait plus d'image (dans le paragraphe).
 
Lorsqu'il n'y a plus d'image, il n'y a plus de ratio à calculer,
on affiche alors la valeur qui a été transmise par l'image précédente,
(qui était logiquement la dernière du paragraphe).
 
Techniquement, on utilisera une fonction avec deux paramètres :
- la somme des ratios envoyée par l'image précédente
- la "référence" de l'image courante, celle qu'il faut traiter
 

Code :
  1. <!-- Définition de la fonction -->
  2. <xsl:template name="somme_ratios">
  3.    <!-- et ses deux paramètres -->
  4.    <xsl:param name="total"/>
  5.    <xsl:param name="position"/>
  7.    <!-- Ici viendra l'implémentation de la fonction -->
  9. </xsl:template>


 
La fonction doit être capable de lire la largeur et la hauteur de l'image courante :
Rq : on prendra soin d'appeler cette fonction à partir d'un noeud parent de image,
donc à partir de "paragraphe" dans notre cas.

Code :
  1. <xsl:variable name="largeuri"><xsl:value-of select="image[position()=$position]/@l_orig"/></xsl:variable>
  2. <xsl:variable name="hauteuri"><xsl:value-of select="image[position()=$position]/@h_orig"/></xsl:variable>


 
Mais que se passe-t-il si la position à laquelle nous nous trouvons ne correspond plus à une image ?
Nous renverrons le résultat !
Il va falloir tester cette condition :

Code :
  1. <xsl:choose>
  3.   <xsl:when test="$position &lt;= count(image)">
  4. <!-- en clair : test="$position <= count(image)", ou encore
  5.          notre position actuelle est-elle inférieure ou égale au nombre d'images de ce paragraphe ? -->
  6. <!-- C'est le cas général, il y a une image à cette position -->
  7.   </xsl:when>
  9.   <xsl:otherwise>
  10.         <!-- Sinon, il n'y a plus d'image, on renvoie le résultat -->
  11.   </xsl:otherwise>
  12. </xsl:choose>


 
Dans le cas général, il faudra calculer le ratio de l'image courante, l'additionner à la somme des ratios des images précédentes, et transmettre le tout à l'image suivante (qu'elle existe ou pas, nous avons vu que si elle n'existe pas, on prend alors la décision de renvoyer le résultat).
c'est là qu'intervient la récursivité, nous sommes dans une fonction et nous rappelons cette même fonction,
mais avec des paramètres qui auront évolués (le $total a changé, et la position est incrémentée) :

Code :
  1. <xsl:call-template name="somme_ratios">
  2.   <xsl:with-param name="total"><xsl:value-of select="$total+$largeuri div $hauteuri"/></xsl:with-param>
  3.   <xsl:with-param name="position"><xsl:value-of select="$position+1"/></xsl:with-param>
  4. </xsl:call-template>


 
Dans le cas final, on se contente d'afficher le total passé en paramètre
(pour les sceptiques : ça marche !)

Code :
  1. <xsl:value-of select="$total"/>


 
exemple de fonctionnement si nous avons 3 images :

Code :
  1. tot_ratio(tot=0,pos=1)
  2.   il y a une image (pos=1<=nb_img=3)
  3.   ->tot_ratio(tot=ratio1,pos=2)
  4.      il y a une image (pos=2<=nb_img=3)
  5.      ->tot_ratio(tot=r1+r2,pos=3)
  6.        il y a une image (pos=3<=nb_img=3)
  7.        ->tot_ratio(tot=r1+r2+r3,pos=4)
  8.          il n'y a plus d'image
  9.          -> AFFICHE tot
  10.        <- tot est affiché
  11.        fin fonction(pos=4)
  12.      <- tot est affiché
  13.      fin fonction(pos=3)
  14.   <- tot est affiché
  15.   fin fonction(pos=2)
  16. <-tot est toujours affiché
  17. fin de la fonction initiale,


 
Assemblons le tout :

Code :
  1. <!-- définition de la fonction et de ses deux paramètres -->
  2. <xsl:template name="somme_ratios">
  3. <xsl:param name="total"/>
  4. <xsl:param name="position"/>
  6.   <!-- à dé-commenter pour voir le fonctionnement de plus près
  7.       (mais attention, nous modifiez le fonctionnement en ajoutant des affichages
  8.        et ne pourrez plus exploiter le résultat)
  9.     <xsl:text>Appel fonction (total = </xsl:text>
  10.     <xsl:value-of select="$total"/>
  11.     <xsl:text>; position = </xsl:text>
  12.     <xsl:value-of select="$position"/>
  13.     <xsl:text> )</xsl:text><br />
  14.   -->
  16. <!--Dans quel cas somme-nous ? -->
  17. <xsl:choose>
  19.    <!-- 1: oui, il existe une image -->
  20.    <xsl:when test="$position &lt;= count(image)">
  22.       <!-- définition des deux variables largeur et hauteur (lecture d'attributs) --> 
  23.       <xsl:variable name="largeur_i">
  24.         <xsl:value-of select="image[position()=$position]/@l_orig"/>
  25.       </xsl:variable>
  26.       <xsl:variable name="hauteur_i">
  27.         <xsl:value-of select="image[position()=$position]/@h_orig"/>
  28.       </xsl:variable>
  30.       <!-- calcul du ratio l/h de cette image -->
  31.       <xsl:variable name="ratio_i">
  32.         <xsl:value-of select="number($largeuri div $hauteuri)"/>
  33.       </xsl:variable>
  35.       <!-- à dé-commenter pour voir le fonctionnement de plus près
  36.         <xsl:text>Image trouvée, valeurs : larg_i = </xsl:text>
  37.         <xsl:value-of select="$largeur_i"/>
  38.         <xsl:text>; haut_i = </xsl:text>
  39.         <xsl:value-of select="$hauteur_i"/>
  40.         <xsl:text>; ratio_i = </xsl:text>
  41.         <xsl:value-of select="$ratio_i"/>
  42.         <br />
  43.       -->
  45.       <!-- puis on passe à l'image suivante, en mettant à jour les paramètres
  46.       <xsl:call-template name="somme_ratios">
  47.         <xsl:with-param name="total">
  48.           <xsl:value-of select="$total+$ratio_i"/>
  49.         </xsl:with-param>
  50.         <xsl:with-param name="position">
  51.           <xsl:value-of select="$position+1"/>
  52.         </xsl:with-param>
  53.       </xsl:call-template>
  54.     </xsl:when>
  56.     <!-- 2:Sinon, cas final, plus d'image, on "affiche" le résultat -->
  57.     <xsl:otherwise>
  58.       <!-- à dé-commenter pour voir le fonctionnement de plus près
  59.         <xsl:text>Image non trouvée, fin de la récursivité</xsl:text>
  60.         <xsl:text>Seule la ligne suivante devrait être affichée</xsl:text>
  61.         <br />
  62.       -->
  63.       <xsl:value-of select="$total"/>
  64.     </xsl:otherwise>
  66. </xsl:choose>
  68. </xsl:template>


 
La fonction est maintenant écrite, reste à l'initialiser, au bon moment et au bon endroit :
 
Dans mon cas, mon fichier xsl commence par définir une "variable" :
puis traite la racine du xml, et se termine par notre fonction :

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  4. <xsl:variable name="larg_page">900</xsl:variable>
  5. <xsl:template match="/">
  6.   <html>
  7.    <head>
  8.      <!-- La partie en-tête -->
  9.    </head>
  10.    <body class="defaut">
  11.      <!-- Le corps -->
  12.    </body>
  13.   </html>
  14. </xsl:template>
  16. <xsl:template name="somme_ratios">
  17.    <!-- La fonction décrite ci-dessus -->
  18. </xsl:template>
  20. </xsl:stylesheet>


 
C'est bien sûr dans le corps du html que nous ferons notre appel à la fonction.
Tout d'abord un traitement à réaliser indépendamment, pour chaque paragraphe :

Code :
  1. <xsl:for-each select="site/page/paragraphe">
  2.   <!-- ... -->
  3. </xsl:for-each>


(Rq : vous aurez probablement à traiter chaque page avant  
de traiter chaque paragraphe, hors sujet dans notre cas)
 
Dans chaque paragraphe, nous commençons par calculer ce fameux total_ratio,
on confirme, on vérifie qu'on est bien sur le noeud parent de "image",
on peut lancer notre calcul itératif :

Code :
  1. <xsl:call-template name="somme_ratios">
  2.    <xsl:with-param name="total">0</xsl:with-param>
  3.    <xsl:with-param name="position">1</xsl:with-param>
  4. </xsl:call-template>


 
Le résultat s'affiche à l'écran, et si je veux le stocker ?
Aussi incroyable que ça puisse paraître, tout simplement
en encadrant cet appel par une définition de variable :

Code :
  1. <xsl:variable name="tot_ratio">
  2. <xsl:call-template name="somme_ratios">
  3.    <xsl:with-param name="total">0</xsl:with-param>
  4.    <xsl:with-param name="position">1</xsl:with-param>
  5. </xsl:call-template>
  6. </xsl:variable>


 
Voilà c'est tout !
Je ne me défausse pas pour autant, on a bien envie de les voir bien rangées ces images ?
Nous pouvons les mettre dans un paragraphe :

Code :
  1. <p class="photo">
  2.   <!-- ... -->
  3. </p>


 
Nous sommes toujours sur le noeud "parapraphe", et nous allons afficher chaque image :

Code :
  1. <xsl:for-each select="image">
  2.   <!-- ... -->
  3. </xsl:for-each>


 
Calculons la largeur et la hauteur modifiée de cette image
(d'après la formule du début et le désormais fameux total_ratio) :

Code :
  1. <xsl:variable name="l_new">
  2.   <xsl:value-of select="number(@l_orig * $larg_page div @h_orig div $tot_ratio)" />
  3. </xsl:variable>   
  5. <xsl:variable name="h_new">
  6.   <xsl:value-of select="number($l_new * @h_orig div @l_orig)" />
  7. </xsl:variable>


 
Et affichons cette image, suivie d'un espace pour les séparer "proprement" :

Code :
  1. <img alt="Image introuvable...">
  2. <xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute>
  3. <xsl:attribute name="width">
  4.    <xsl:value-of select="$l_new" />
  5. </xsl:attribute>
  7. <xsl:attribute name="height">
  8.    <xsl:value-of select="$h_new" />
  9. </xsl:attribute>
  10. </img>
  11. <xsl:text> </xsl:text>


 
Bon ben c'est fini ?
 
Reste plus qu'à recomposer...  
[mettez tout dans le même répertoire
 exemple.xml (page à appeler dans le navigateur)
 exemple.dtd (appelé par exemple.xml)
 exemple.xsl (appelé par exemple.xml, traité par le navigateur récent)
 exemple.css (appelé par le navigateur via exemple.xsl)
]
 
exemple.dtd

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!ELEMENT site (parametres,page+)>
  3. <!ELEMENT page (paragraphe+)>
  4. <!ELEMENT paragraphe (image+)>
  5. <!ELEMENT image (#PCDATA)>
  6. <!ATTLIST image l_orig NMTOKEN #REQUIRED h_orig NMTOKEN #REQUIRED>


 
exemple.xml (pensez à mettre les exemplex.jpg dans le même dossier) :
l_orig="400" h_orig="398" sont les dimensions originales de l'image
(un jour je saurais les trouver automatiquement)
un coup d'explorateur de fichier vous informera facilement...

Code :
  1. <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
  2. <!--?xml version="1.0" encoding="iso-8859-1" standalone="no"?-->
  3. <?xml-stylesheet type="text/xsl" href="exemple.xsl"?>
  4. <!DOCTYPE librairie SYSTEM "exemple.dtd">
  5. <site>
  6.    <page>
  7.       <paragraphe>
  8.          <image l_orig="400" h_orig="398">exemple3.jpg</image>
  9.          <image l_orig="700" h_orig="511">exemple4.jpg</image>
  10.          <image l_orig="300" h_orig="426">exemple5.jpg</image>
  11.       </paragraphe>
  12.       <paragraphe>
  13.          <image l_orig="400" h_orig="404">exemple1.jpg</image>
  14.          <image l_orig="200" h_orig="226">exemple1.jpg</image>
  15.          <image l_orig="100" h_orig="324">exemple1.jpg</image>
  16.       </paragraphe>
  17.       <paragraphe>
  18.          <image l_orig="600" h_orig="180">exemple2.jpg</image>
  19.          <image l_orig="600" h_orig="320">exemple2.jpg</image>
  20.       </paragraphe>
  21.    </page>
  22. </site>


 
exemple.css (une feuille de style classique)

Code :
  1. .defaut {
  2. color: #CCCCCC;
  3.         font-size: small;
  4. text-align: left;
  5. background-color: #000000;
  6. font-weight: 700;
  7. }
  8. .photo {
  9. text-align: center;
  10. }


 
exemple.xsl :

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


Message édité par La_Buze le 19-06-2005 à 11:11:10
n°1124357
avander
Posté le 19-06-2005 à 08:08:44  profilanswer
 

Joli! Ce serait parfait avec un lien pour voir le résultat obtenu en html...  

n°1124368
La_Buze
Posté le 19-06-2005 à 09:24:13  profilanswer
 

Merci... y'a encore pas mal de boulot,
pour arriver à quelque chose de complet et présentable.
 
Le résultat html je ne le connais pas, puisque c'est le client qui l'encode à la volée.
Mais dans ce cas ça se limite à :
<p>
<img src="..." width ="..." height ="..."></img>&nbsp;
<img src="..." width ="..." height ="..."></img>&nbsp;
(...)
<img src="..." width ="..." height ="..."></img>&nbsp;
</p>


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  XML/XSL

  [XML/DTD/XSL/CSS/HTM] Exemple affichage d'images (tutorial)

 

Sujets relatifs
Probleme HTML et CSSSuperposer des images, c'est possible en htm?
CSS # ou . dans le style[XHTML/CSS] Pb d'affichage sur IE asser étrange :/
DOM XML et variables session PHPMise à jour de la spec CSS 2.1
XSL : Trie spécifiqueProblème de variable pour affichage de pages
Ancre et CSS 
Plus de sujets relatifs à : [XML/DTD/XSL/CSS/HTM] Exemple affichage d'images (tutorial)

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.172 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR