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 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
| <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"
encoding="utf-8"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Audio</title>
<link type="text/css" rel="stylesheet" href="Audio/Audio_css.css" />
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type='text/javascript' src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery.timers.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
// Paramétrage / CSS -> conformité / W3C (Via jQuery)
$(".Container").css("width", 400);
// Ouverture, blocage ou fermeture / fenêtre cachée, via survol ou click sur [+]
// (Effets sympas: 'easeInOutCirc', 'easeInOutQuart', 'easeInOutQuint' ou 'easeInOutCubic')
$('#bouton1')
.mouseenter(descente1)
.mouseenter(tooltip)
.mouseleave(reset_tempo)
.mouseleave(montee1)
.toggle( // Si click -> (dé)blocage / disparition / texte caché...
function(){
$(this).unbind('mouseleave',montee1);
},
function(){
$(this).mouseleave(montee1);
}
);
function descente1() {
$('#bouton1')
.unbind('mouseenter',descente1); // Blocage anti-rebonds (si survol répété de l'image)
$('#message_numero1').animate({
height:'show'
},900,'easeInOutCirc',function(){$('#bouton1').mouseenter(descente1);}); // Annulation / Blocage anti-rebonds
};
function montee1() {
$('#message_numero1').animate({
height:'hide'
},900);
};
$('#bouton2').mouseenter(descente2).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee2).toggle(function(){$(this).unbind('mouseleave',montee2);},function(){$(this).mouseleave(montee2);});function descente2(){$('#bouton2').unbind('mouseenter',descente2);$('#message_numero2').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton2').mouseenter(descente2);});};function montee2(){$('#message_numero2').animate({height:'hide'},900);};
$('#bouton3').mouseenter(descente3).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee3).toggle(function(){$(this).unbind('mouseleave',montee3);},function(){$(this).mouseleave(montee3);});function descente3(){$('#bouton3').unbind('mouseenter',descente3);$('#message_numero3').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton3').mouseenter(descente3);});};function montee3(){$('#message_numero3').animate({height:'hide'},900);};
$('#bouton4').mouseenter(descente4).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee4).toggle(function(){$(this).unbind('mouseleave',montee4);},function(){$(this).mouseleave(montee4);});function descente4(){$('#bouton4').unbind('mouseenter',descente4);$('#message_numero4').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton4').mouseenter(descente4);});};function montee4(){$('#message_numero4').animate({height:'hide'},900);};
$('#bouton5').mouseenter(descente5).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee5).toggle(function(){$(this).unbind('mouseleave',montee5);},function(){$(this).mouseleave(montee5);});function descente5(){$('#bouton5').unbind('mouseenter',descente5);$('#message_numero5').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton5').mouseenter(descente5);});};function montee5(){$('#message_numero5').animate({height:'hide'},900);};
$('#bouton6').mouseenter(descente6).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee6).toggle(function(){$(this).unbind('mouseleave',montee6);},function(){$(this).mouseleave(montee6);});function descente6(){$('#bouton6').unbind('mouseenter',descente6);$('#message_numero6').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton6').mouseenter(descente6);});};function montee6(){$('#message_numero6').animate({height:'hide'},900);};
$('#bouton7').mouseenter(descente7).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee7).toggle(function(){$(this).unbind('mouseleave',montee7);},function(){$(this).mouseleave(montee7);});function descente7(){$('#bouton7').unbind('mouseenter',descente7);$('#message_numero7').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton7').mouseenter(descente7);});};function montee7(){$('#message_numero7').animate({height:'hide'},900);};
$('#bouton8').mouseenter(descente8).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee8).toggle(function(){$(this).unbind('mouseleave',montee8);},function(){$(this).mouseleave(montee8);});function descente8(){$('#bouton8').unbind('mouseenter',descente8);$('#message_numero8').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton8').mouseenter(descente8);});};function montee8(){$('#message_numero8').animate({height:'hide'},900);};
$('#bouton9').mouseenter(descente9).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee9).toggle(function(){$(this).unbind('mouseleave',montee9);},function(){$(this).mouseleave(montee9);});function descente9(){$('#bouton9').unbind('mouseenter',descente9);$('#message_numero9').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton9').mouseenter(descente9);});};function montee9(){$('#message_numero9').animate({height:'hide'},900);};
$('#bouton10').mouseenter(descente10).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee10).toggle(function(){$(this).unbind('mouseleave',montee10);},function(){$(this).mouseleave(montee10);});function descente10(){$('#bouton10').unbind('mouseenter',descente10);$('#message_numero10').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton10').mouseenter(descente10);});};function montee10(){$('#message_numero10').animate({height:'hide'},900);};
// y = coordonnée verticale de la souris
document.onmousemove = function(e){
if(!e){
e = window.event;
}
y = e.clientY;
};
i=1; // Nombre d'affichages du tooltip
function tooltip() {
if (i==1) {
// $("#tooltip").css("left", -125).css("top", 3); // Ajustement y du tooltip à la coordonnéee verticale de l'image [+]
document.getElementById('tooltip').style.top=y-25+"px";// Ajustement y du tooltip à la coordonnéee verticale y de la souris (précédemment définie)
$("#tooltip").oneTime("1s", function() { // Si le survol de l'image est > à 5 sec-> le Tooltips apparait (oneTime -> http://plugins.jquery.com/project/timers)
$("#tooltip").fadeIn(2500).delay(2500).fadeOut(1000);
i++; // Pour empêcher que le tooltip s'affiche plus d'une fois
});
}
};
function reset_tempo() {
$("#tooltip").stopTime(); // Arrêt de la tempo oneTime() si on quitte l'image (stopTime -> http://plugins.jquery.com/project/timers)
$("#tooltip").clearQueue();
$("#tooltip").fadeOut(1000);
};
})
//]]>
</script>
</head>
<body bgcolor="#FFFFFF">
<div class="Container">
<!-- Appel procédure permettant d'afficher chaque bloc de lignes -->
<xsl:apply-templates select="enregistrements/auteur/ressource/regroupement" />
</div>
<!-- Image s'affichant 1 fois (quelques secondes) pour proposer de cliquer sur [+] si on le survole -->
<div><img id="tooltip" src="Audio/images/Cliquez ici.png" alt="" /></div>
</body>
</html>
</xsl:template>
<xsl:template match="regroupement">
<xsl:apply-templates select="ligne">
<!-- "plusCount" -> Comptage du nombre de "cousins" précédant la balise <plus> à partir de la balise courante <regroupement>
pour l'ajouter ensuite au nombre de "frères" précédant chaque balise <plus> concernée
afin de gérer,via les fonctions JQUERY situées dans le <Head> (et le paramétrage des id "message_numero...")
l'affichage des boutons [+] (et du contenu caché correspondant) selon leur ordre d'apparition : -->
<xsl:with-param name="plusCount" select="count(preceding-sibling::*/*/plus)"/>
<!-- "imageCount" -> Comptage du nombre de "cousins" précédant la balise <image> à partir de la balise courante <regroupement>
pour l'ajouter ensuite au nombre de "frères" précédant chaque balise <image> concernée
afin de gérer,via les fonctions JQUERY situées dans le <Head> (et le paramétrage des id "message_numero...")
l'affichage des boutons [+] (et du contenu caché correspondant) selon leur ordre d'apparition : -->
<xsl:with-param name="imageCount" select="count(preceding-sibling::*/*/image)"/>
</xsl:apply-templates>
<div class="Espace" style="width:389px"></div> <!-- Le "+2" sert à prolonger l'effet d'ombré sur la droite -->
</xsl:template>
<xsl:template match="ligne">
<xsl:param name="plusCount"/>
<!-- Test si il y a une balise encastrée "<plus>" -->
<xsl:if test="plus">
<!-- Calcul du numéro d'apparition de la balise encastrée "<plus>" concernée
( =f(nombre de cousins précédents + nombre de frères précédents) ) -->
<xsl:variable name="compteur_de_lignes"><xsl:value-of select="$plusCount+count(preceding-sibling::*/plus)+1" /></xsl:variable>
<xsl:variable name="bouton"><xsl:value-of select="concat('bouton', $compteur_de_lignes)" /></xsl:variable>
<img id="{$bouton}" class="Bouton_plus" src="Audio/images/Plus_mini_2.gif" alt=""/>
</xsl:if>
<xsl:if test="not(plus or image)"> <!-- Sinon... -->
<div class="Bouton_rien">
</div>
</xsl:if>
<!-- GESTION PARTIE TEXTE / LA BALISE <ligne> -->
<xsl:if test="(not(name(following-sibling::*[position()=1]) = 'extrait')) and (not(name(following-sibling::*[position()=1]) = 'surf'))">
<div class="Texte" style="width:367px">
<xsl:value-of select="text()"/> <!-- Affiche le contenu de la balise actuelle (<ligne>) sans afficher celui de sa balise enfant (<petit>) -->
<xsl:apply-templates select="petit"/>
</div>
</xsl:if>
<div class="Ombre_ligne_d"></div>
<xsl:if test="plus"> <!-- Balise encastrée "<plus>" ? -->
<!-- Numérotation / id "message_numero..." -->
<xsl:variable name="compteur_de_lignes"><xsl:value-of select="$plusCount+count(preceding-sibling::*/plus)+1" /></xsl:variable>
<xsl:variable name="message_numero"><xsl:value-of select="concat('message_numero', $compteur_de_lignes)" /></xsl:variable>
<xsl:variable name= "texte_style"><xsl:value-of select= "plus/@style"/></xsl:variable> <!-- Exemple: si @texte="fluo" -->
<xsl:variable name= "texte_recu"><xsl:value-of select= "plus/text()"/></xsl:variable>
<xsl:variable name= "info_complete"><xsl:value-of select="concat($texte_recu, '
')" /></xsl:variable>
<!-- Gestion / texte caché -->
<div id="{$message_numero}" class="Texte_caché" style="display:none; width:375px">
<span class="{$texte_style}"><xsl:value-of select="$info_complete"/></span> <!-- Affichage éventuel du texte caché -->
<!-- Permet de faire un "retour chariot" pour afficher une ligne vide juste après le texte du xml -->
</div>
</xsl:if>
</xsl:template>
</xsl:stylesheet> |
Partager