11548 sujets

JavaScript, DOM et API Web HTML5

Problème d'enchainement de script

Bonjour,
j'ai créé pour mon fils une page web avec des images d'animaux et quand il clique dessus ça joue le cri de la bête. Pour pouvoir l'utiliser sur mon PC, ma tablette et mon téléphone je me suis dit que j'allais faire ça en html avec un peu de jquery.
Je vous détaille un peu le fonctionnement pour ensuite vous exposer mon problème.
A la racine du dossier se trouve :
-son.html : la page web qui affiche les images
-description_animaux.xml : un fichier qui contient la liste des animaux avec un petite description. Je stocke ainsi des informations de manière structurée mais sans base de données vu qu'il n'y aura jamais un gros volume à gérer
-Un dossier CSS qui contient un seul fichier base.css mais j'ai pris l'habitude de le mettre dans un dossier séparé
-Un dossier son qui contient les cris des animaux
-Un dossier JS qui contient le fichier jquery.js et le fichier son.js qui joue un son quand on clique
-Un dossier IMAGE qui contient un sous dossier off avec les images des animaux en noir et blanc et un sous dossier on qui contient les images des animaux en couleurs car sur la page les animaux sont en noir et blanc et l'animal sur lequel on clique s'affiche en couleur.

Voici ce que contiennent les fichiers :
-son.html :
<!DOCTYPE html>
<html>
    <head>
        <title>Les animaux</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" media="screen" href="CSS/base.css">
        <script type="text/javascript" src="JS/jquery.js"></script>
        <script type="text/javascript" src="JS/son.js"></script>
    </head>   
    <body>
        <header>    
            <div class="titre">Les cris des animaux</div>
        </header>
        <section id="contenu">
            <img src="IMAGE/off/ane.jpg" title="ane" class="trigger"/>
...et ainsi de suite avec d'autres images
        </section>
        <div id="audio"></div>
    </body>
</html>


-son.js :
$(document).ready(function() {     
        
    // Initialise la source
    function addSource(elem, path) {
    $('<source>').attr('src', path).appendTo(elem);
    }     

    // Initialisation de l'action sur notre lien
    $('.trigger').click(function() {
    //on remets les images en noir et blanc avant d'afficher en couleur l'image sélectionnée
    $(".trigger").each(function(){
        $(this).attr("src",'IMAGE/off/'+$(this).attr("title")+'.jpg')
    });
    
    //On vide la balise audio pour arrêter de jouer le son en cours
    $('#audio').text('');

    // Création d'un élément audio, et paramétrages
    var audio = $('<audio>', {
        autoPlay : 'play'
    });
     
    var idSelectionne=$(this).attr("title");
       
    //On ajoute les sources (*.ogg et *.mp3)
    addSource(audio, 'son/'+idSelectionne+'.ogg');

    // Ajout des éléments dans notre div
    audio.appendTo('#audio');
    // Effet
    $(this).fadeOut('slow',function(){
    $(this).attr("src",'IMAGE/on/'+idSelectionne+'.jpg');
        $(this).fadeIn('slow');    
    });
    $('header').text('');
    //Ajout de la description
    $.ajax( {
            type: "GET",
            url: "description_animaux.xml",
            dataType: "xml",
            success: function(xml) 
                {
                $(xml).find('animal').each(   
                    function()
                    {
                    var id = $(this).attr('id');
                    if(idSelectionne==id){
                        var nomAnimal = $(this).find('nom_animal').text();
                        var description = $(this).find('description').text();
                        $('<div class="nomAnimal"></div>').html(nomAnimal).appendTo('header');
                        $('<div class="description"></div>').html(description).appendTo('header');
                }
                    });
                }
        });       
 
    });
});


-un extrait de description_animaux.xml:
<?xml version="1.0" encoding="UTF-8"?>
<liste>
<animal id="ane">
    <nom_animal>Ane</nom_animal>
    <description></description>
</animal> 
</liste>


Et jusque là tout fonctionne bien sur un navigateur sous ubuntu, windows et même une tablette android. Ma page s'affiche bien et quand je clique j'entends bien un joli chant de baleine ou le cri d'un blaireau.
Seulement je me dis "Tiens vu que j'ai un fichier xml pourquoi ne pas l'utiliser pour aussi gérer l'affichage de son.html" comme ça si je veux ajouter une bête ou la voisine pas de soucis je n'ai qu'à modifier le ficher xml et pas en plus devoir ajouter une ligne dans son.html.
J'écris donc le fichier initialise_page.js qui à cette te :
$(document).ready(function() {     
    $.ajax( {
            type: "GET",
            url: "description_animaux.xml",
            dataType: "xml",
            success: function(xml) 
                {
                $(xml).find('animal').each(  
                    function()
                    {
                    var id = $(this).attr('id');
                    $('<img src="IMAGE/off/'+id+'.jpg" title="'+id+'" class="trigger"/>').appendTo('#contenu');
                    });
                }
        });            
});

Et j'ajoute la ligne <script type="text/javascript" src="JS/initialise_page.js"></script> dans son.html en supprimant toutes les balises img.
Je rafraîchis mon navigateur et mes images s'affichent, miracle. Sauf que quand je clique sur une image rien ne se passe et je ne vois pas pourquoi. En plus comme je débute avec jquery est-ce que vous avez une idée?
D'avance merci.

PS : en faisant des recherches je me suis aussi aperçu que le code ne fonctionne pas sous chrome. A première vu c'est l'accès au fichier xml qui cloche, mais ceci est une autre histoire comme dirait le père castor.
Modifié par BelouG (29 Apr 2012 - 22:56)
En fait je chargeais mes images après le chargement des .js donc le .click ne pouvait pas les affecter.
Sujet clos
Aller à